title: Vue $on not running my function when event $emit is emited, even though I can see the event triggered in Vue console
body: <p>I am trying to test if my <code>$on</code> function is working. I can clearly see that the the Vue console is receiving the event emit, but the pre defined call back function in <code>$on</code> is not being called.</p>
  
  <p>Here is the code: </p>
  
  <pre><code>&lt;template lang="html"&gt;
    &lt;div class="test"&gt;
      &lt;Filters&gt;&lt;/Filters&gt;
    &lt;div&gt;
      &lt;ul class="o-list c-stores"&gt;
        &lt;Result v-bind:total="filteredRestuarants.length" v-bind:open="isOpen" v-on:toggle="toggleRestaurantList"&gt;&lt;/Result&gt;
        &lt;li v-for="(restaurant, index) in filteredRestuarants" class="c-stores__location" :class="{'first': isFirst(index), 'last': isLast(index, restaurants)}"&gt;
          &lt;Location :index="index" :store="restaurant" :link="() =&gt; setCurrentRestaurant(restaurant)"&gt;&lt;/Location&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import eventHub from './../../event-hubs/storefinder'
  import Location from './Location'
  import Filters from './Filters'
  import Result from './Result'
  
  export default {
    props: ["restaurants", "isOpen", "currentSearch"],
    data() {
      return {
        attributes : [],
      }
    },
    head: {
      title: function () {
        return {
          inner: this.$t('storefinder.overview')
        }
      },
      meta: function functionName() {
        return [{
            name: 'og:title',
            content: this.$t('storefinder.overview') + ' - ' + this.$t('storefinder.name'),
            id: "og-title"
          },
          {
            name: 'description',
            content: this.$t('storefinder.description'),
            id: "meta-description"
          },
          {
            name: 'og:description',
            content: this.$t('storefinder.description'),
            id: "og-description"
          },
        ]
      }
    },
    components: {
      Location,
      Filters,
      Result
    },
    computed: {
      filteredRestuarants(rest) {
        let restaur = rest || this.restaurants;
        return this.restaurants;
      }
    },
    methods: {
      startEvents(){
        eventHub.$on('addFilterTheRestaurants', (attribute) =&gt; {console.log("test")});
        eventHub.$on('removeFilterTheRestaurants', (attribute) =&gt; {console.log("test")});
      },
      toggleRestaurantList() {
        eventHub.$emit('showRestaurantList');
      },
      setCurrentRestaurant(restaurant) {
        this.trackRestaurantSelect(restaurant.publicNameSlug);
        this.$router.push({
          name: "store",
          params: {
            restaurant: restaurant.publicNameSlug
          }
        });
      },
      trackRestaurantSelect(restaurantName) {
        dataLayer.push({
          'event': 'GAEvent',
          'eventCategory': 'restaurants',
          'eventAction': 'clickResult',
          'eventLabel': restaurantName,
          'eventValue': undefined,
          'searchTerm': this.currentSearch &amp;&amp; this.currentSearch.toLowerCase(),
          'amountSearchResults': 1
        });
      },
      created() {
        this.startEvents()
        // eventHub.$on('addFilterTheRestaurants', (attribute) =&gt; this.filteredRestuarants.value = this.restaurants.forEach(rest =&gt; {console.log(rest)}));
        // eventHub.$on('addFilterTheRestaurants', (attribute) =&gt; {console.log("test")});
        // eventHub.$on('removeFilterTheRestaurants', (attribute) =&gt; {console.log("test")});
      },
      beforeDestroy () {
        bus.$off('addFilterTheRestaurants')
        bus.$off('removeFilterTheRestaurants')
      },
      isLast: function (idx, list) {
        return idx === list.length - 1;
      },
      isFirst: function (idx) {
        return idx === 0;
      },
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Adn its being emited here: </p>
  
  <pre><code>&lt;template lang="html"&gt;
  
  
  &lt;div class="c-filters"&gt;
      &lt;div class="c-filters-list"&gt;
    // Here I call the function to $emit my event
        &lt;div class="c-filters__item" v-for="item in filters" @click="(e) =&gt; {toggleClass(e); addFilter(item)}"&gt; 
          {{$t(`storefinder.store.attributes.${item}`)}}
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import {getKeys} from './../../i18n/'
  import eventHub from './../../event-hubs/storefinder'
  import notificationHub from './../../event-hubs/notification'
  import GLSApi from './../../api/gls'
  
  export default {
    data() {
      return {
        attributes: null,
        filters : [
          "WIFI",
          "TABLESERVICE",
          "MCCAFE",
          "INDOORDINING",
          "DRIVETHRU",
          "BREAKFAST",
          "MALEFEMALEHANDICAPACCESSIBLE",
          "BABYCHANGING",
          "BIRTHDAYPARTIES",
          "SELFORDERKIOSK",
          "OUTDOORPLAYGROUND",
          "INDOORPLAYGROUND",
          "JUNIORCLUB"
        ]
      }
    },
    computed: {
      getAttributes() {
        let arr = this.attributes.map(elem =&gt; elem.storeAttributes.attribute)
        return arr.map((el,index, array) =&gt; array[index].map(obj =&gt; obj.type))
      }
    },
    methods: {
      toggleClass(e){
        e.target.classList.contains("add-filter") ? e.target.classList.remove("add-filter") : e.target.classList.add("add-filter") ;
      },
   // here it the $emit happening
      addFilter (item) {
        eventHub.$emit('addFilterTheRestaurants', item);
      },
      deleteFilter (item) {
        eventHub.$emit('removeFilterTheRestaurants', item);
      }
    },
    beforeCreate() {
      eventHub.$on('attributesLoaded', (params) =&gt; this.attributes = params);
    }
  }
  &lt;/script&gt;
  </code></pre>