vuejs2 event listening not working - vue.js

Question

I am following this tutorial https://github.com/ratiw/vuetable-2-tutorial and trying to develop my laravel admin panel using vuejs.
Filter in the list vue is not working
This is my list.vue
<template>
<div>
<filter-bar></filter-bar>
<vuetable ref="vuetable"
api-url="/api/category/list"
:fields="fields"
pagination-path=""
:css="css.table"
:sort-order="sortOrder"
:multi-sort="true"
detail-row-component="my-detail-row"
:append-params="moreParams"
#vuetable:cell-clicked="onCellClicked"
#vuetable:pagination-data="onPaginationData"
></vuetable>
<div class="vuetable-pagination">
<vuetable-pagination-info ref="paginationInfo"
info-class="pagination-info"
></vuetable-pagination-info>
<vuetable-pagination ref="pagination"
:css="css.pagination"
:icons="css.icons"
#vuetable-pagination:change-page="onChangePage"
></vuetable-pagination>
</div>
</div>
</template>
<script>
import VueEvents from 'vue-events'
Vue.use(VueEvents)
var Vuetable = require('vuetable-2/src/components/Vuetable.vue');
Vue.use(Vuetable);
var VuetablePagination = require('vuetable-2/src/components/VuetablePagination.vue');
var VuetablePaginationInfo = require('vuetable-2/src/components/VuetablePaginationInfo.vue');
Vue.component('custom-actions', require('../CustomActions.vue'))
Vue.component('filter-bar', require('../FilterBar.vue'))
export default {
components: {
Vuetable,
VuetablePagination,
VuetablePaginationInfo,
},
data () {
return {
fields: [
{
name: 'id',
sortField: 'id',
},
{
name: 'name',
sortField: 'name',
},
{
name: '__component:custom-actions',
title: 'Actions',
titleClass: 'text-center',
dataClass: 'text-center'
}
],
css: {
table: {
tableClass: 'table table-bordered table-striped table-hover',
ascendingIcon: 'glyphicon glyphicon-chevron-up',
descendingIcon: 'glyphicon glyphicon-chevron-down'
},
pagination: {
wrapperClass: 'pagination',
activeClass: 'active',
disabledClass: 'disabled',
pageClass: 'page',
linkClass: 'link',
},
icons: {
first: 'glyphicon glyphicon-step-backward',
prev: 'glyphicon glyphicon-chevron-left',
next: 'glyphicon glyphicon-chevron-right',
last: 'glyphicon glyphicon-step-forward',
},
},
sortOrder: [
{ field: 'id', sortField: 'id', direction: 'asc'}
],
moreParams: {}
}
},
methods: {
onPaginationData (paginationData) {
this.$refs.pagination.setPaginationData(paginationData)
this.$refs.paginationInfo.setPaginationData(paginationData)
},
onChangePage (page) {
this.$refs.vuetable.changePage(page)
},
onCellClicked (data, field, event) {
console.log('cellClicked: ', field.name)
this.$refs.vuetable.toggleDetailRow(data.id)
},
onFilterSet (filterText) {
this.moreParams = {
'filter': filterText.trim()
}
Vue.nextTick( () => this.$refs.vuetable.refresh())
},
onFilterReset () {
this.moreParams = {}
Vue.nextTick( () => this.$refs.vuetable.refresh())
}
},
mounted() {
this.$events.$on('filter-set', eventData => this.onFilterSet(eventData))
this.$events.$on('filter-reset', e => this.onFilterReset())
}
}
</script>
<style>
.pagination {
margin: 0;
float: right;
}
.pagination a.page {
border: 1px solid lightgray;
border-radius: 3px;
padding: 5px 10px;
margin-right: 2px;
}
.pagination a.page.active {
color: white;
background-color: #337ab7;
border: 1px solid lightgray;
border-radius: 3px;
padding: 5px 10px;
margin-right: 2px;
}
.pagination a.btn-nav {
border: 1px solid lightgray;
border-radius: 3px;
padding: 5px 7px;
margin-right: 2px;
}
.pagination a.btn-nav.disabled {
color: lightgray;
border: 1px solid lightgray;
border-radius: 3px;
padding: 5px 7px;
margin-right: 2px;
cursor: not-allowed;
}
.pagination-info {
float: left;
}
</style>
Filter in the list vue is not working
This is my FilterBar.vue
<template>
<div class="filter-bar ui basic segment grid">
<div class="ui form">
<div class="inline field">
<label>Search for:</label>
<input type="text" v-model="filterText" class="three wide column" #keyup.enter="doFilter" placeholder="name, nickname, or email">
<button class="ui primary button" #click="doFilter">Go</button>
<button class="ui button" #click="resetFilter">Reset</button>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
filterText: ''
}
},
methods: {
doFilter () {
this.$events.fire('filter-set', this.filterText)
},
resetFilter () {
this.filterText = ''
this.$events.fire('filter-reset')
}
}
}
</script>
Event is being fired in the filterbar vue component, but listener in list.vue component doesn't pick it up
I tried the fix in the issues tab
1.using method and mounted
2.using created