vue-tables-2 — $emit from custom filter not making it to callback?

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.

I have a custom filter <filter-brand /> inside a custom template for dataTable which emits Event.$emit("vue-tables.filter::filterByBrand", this.brand).

I want to capture this 'filterByBrand' event in a top-level, router component called <Grid /> which is where I have my <v-client-table /> plus the attendant options including my customFilters.

Any thoughts on where I've gotten off course?

Grid.vue

...
customFilters: [
  {
    name: "filterByBrand",
    callback: function(row, query) {
      console.log("filter=", query); // nothing?
      return row.name[0] === query;
    },
  },
],
...

main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import { ClientTable, Event } from "vue-tables-2";
import "./scss/index.scss";

Vue.use(ClientTable, {}, false, "bootstrap4", {
  filtersRow: FiltersRow,
  genericFilter: FilterKeyword,
  sortControl: SortControl,
  tableHeading: TableHeading,
  dataTable: DataTable, // in which resides my custom filter <filter-brand />
});

Vue.use(Event);

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount("#app");

FilterBrand.vue

<template>
  <div class="form-group position-relative">
    <label for="brandFilter">
      Brand:
    </label>
    <select
      name="brandFilter"
      id="brandFilter"
      class="form-control select"
      @change="handleChange($event)"
      v-model="brand"
    >
      <option disabled selected value="">Choose</option>
      <option value="All">All</option>
      <option value="Brand 1">Brand 1</option>
      <option value="Brand 2">Brand 2</option>
    </select>
  </div>
</template>
<script>
import { Event } from "vue-tables-2"; // if I don't import here, Event below is "window" event.

export default {
  name: "FilterBrand",
  props: ["props"],
  data() {
    return {
      brand: "",
    };
  },
  methods: {
    handleChange(event) {
      this.brand = event.target.value;
      Event.$emit("vue-tables.filter::filterByBrand", this.brand); // where is this going?? :)
    },
  },
};
</script>

My mistake was I had the customFilters block outside the options: {}block in my main Grid.vue file.

So this:

data() {
  return {
    brandEventCount: 0,
    columns: [],
    eventsData: [],
    options: {
      columnsDropdown: true,
      perPage: 25,
      debounce: 500,
    },
    customFilters: [
      {
        name: "filterByBrand",
        callback: function (row, query) {
          return row.brand === query;
        },
      },
    ],
  };
},

Should have been this:

data() {
  return {
    brandEventCount: 0,
    columns: [],
    eventsData: [],
    options: {
      columnsDropdown: true,
      perPage: 25,
      debounce: 500,
      customFilters: [
        {
          name: "filterByBrand",
          callback: function (row, query) {
            return row.brand === query;
          },
        },
      ],
    },
  };
},