title: vue-tables-2 — $emit from custom filter not making it to callback?
body: <p>I'm struggling to get a custom filter in vue-tables-2 to emit an event from a nested, single-page component in Vue. The problem may be that I'm not capturing / handling it correctly upstream.</p>
  <p>I have a custom filter <code>&lt;filter-brand /&gt;</code> inside a custom template for <code>dataTable</code> which emits <code>Event.$emit(&quot;vue-tables.filter::filterByBrand&quot;, this.brand)</code>.</p>
  <p>I want to capture this 'filterByBrand' event in a top-level, router component called <code>&lt;Grid /&gt;</code> which is where I have my <code>&lt;v-client-table /&gt;</code> plus the attendant options including my <code>customFilters</code>.</p>
  <p>Any thoughts on where I've gotten off course?</p>
  <p><strong>Grid.vue</strong></p>
  <pre><code>...
  customFilters: [
    {
      name: &quot;filterByBrand&quot;,
      callback: function(row, query) {
        console.log(&quot;filter=&quot;, query); // nothing?
        return row.name[0] === query;
      },
    },
  ],
  ...
  </code></pre>
  <p><strong>main.js</strong></p>
  <pre><code>import Vue from &quot;vue&quot;;
  import App from &quot;./App.vue&quot;;
  import router from &quot;./router&quot;;
  import store from &quot;./store&quot;;
  import { ClientTable, Event } from &quot;vue-tables-2&quot;;
  import &quot;./scss/index.scss&quot;;
  
  Vue.use(ClientTable, {}, false, &quot;bootstrap4&quot;, {
    filtersRow: FiltersRow,
    genericFilter: FilterKeyword,
    sortControl: SortControl,
    tableHeading: TableHeading,
    dataTable: DataTable, // in which resides my custom filter &lt;filter-brand /&gt;
  });
  
  Vue.use(Event);
  
  Vue.config.productionTip = false;
  
  new Vue({
    router,
    store,
    render: h =&gt; h(App),
  }).$mount(&quot;#app&quot;);
  </code></pre>
  <p><strong>FilterBrand.vue</strong></p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;form-group position-relative&quot;&gt;
      &lt;label for=&quot;brandFilter&quot;&gt;
        Brand:
      &lt;/label&gt;
      &lt;select
        name=&quot;brandFilter&quot;
        id=&quot;brandFilter&quot;
        class=&quot;form-control select&quot;
        @change=&quot;handleChange($event)&quot;
        v-model=&quot;brand&quot;
      &gt;
        &lt;option disabled selected value=&quot;&quot;&gt;Choose&lt;/option&gt;
        &lt;option value=&quot;All&quot;&gt;All&lt;/option&gt;
        &lt;option value=&quot;Brand 1&quot;&gt;Brand 1&lt;/option&gt;
        &lt;option value=&quot;Brand 2&quot;&gt;Brand 2&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  import { Event } from &quot;vue-tables-2&quot;; // if I don't import here, Event below is &quot;window&quot; event.
  
  export default {
    name: &quot;FilterBrand&quot;,
    props: [&quot;props&quot;],
    data() {
      return {
        brand: &quot;&quot;,
      };
    },
    methods: {
      handleChange(event) {
        this.brand = event.target.value;
        Event.$emit(&quot;vue-tables.filter::filterByBrand&quot;, this.brand); // where is this going?? :)
      },
    },
  };
  &lt;/script&gt;
  </code></pre>