Горячая замена модуля: [Vue warn]: ошибка в подключенном хуке: «Ошибка типа: невозможно прочитать свойство« onClik »из неопределенного»

Question

• npm v6.8.0
• laravel 5.5
• laravel.mix v4.0.14
• webpack-dev-server v ^ 3.2.1

Во время работы при горячей замене модуля (npm run hot) это сообщение я получаю в консоли [HMR] Ожидание сигнала обновления от WDS ...[WDS] Горячая замена модуля включена.

И когда у меня есть некоторые изменения в lead-management.js, это сообщение, которое я получил

Приложение [WDS] обновлено.Перекомпиляция ...
[WDS] Горячее обновление приложения ...
[HMR] Проверка обновлений на сервере ...
[Vue warn]: Ошибка в подключенном хуке: "Ошибка типа: Не удается прочитать свойство'onClik' из неопределенного "(найдено в Root)
TypeError: невозможно прочитать свойство 'onClik' из неопределенного
[Vue warn]: ошибка в nextTick:" TypeError: невозможно прочитать свойство 'onClik' из неопределенного "(найденоin Root)
TypeError: Невозможно прочитать свойство 'onClik' из неопределенных
[HMR] Обновленные модули:
[HMR] - ./resources/assets/js/lead-management.js
[HMR] Приложение обновлено.

тогда мои кнопки или любая из функций не работают
FYI onClick - это метод из моего компонента DataTable

ресурсы / активы / js / lead-management.js

import Croppa from 'vue-croppa';
import { Form, HasError, AlertError, AlertSuccess } from 'vform'
import CKEditor from '@ckeditor/ckeditor5-vue';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import datePicker from 'vue-bootstrap-datetimepicker'

import DataTable from './components/DataTable.vue';
import Fullcalendar from './components/Fullcalendar.vue';
import Button from './components/Button.vue';
import Select2 from './components/Select2.vue';
if (module.hot){
    module.hot.accept()
}

import 'pc-bootstrap4-datetimepicker/build/css/bootstrap-datetimepicker.css';
Vue.component('datatable-component', DataTable);
Vue.component('fullcalendar-component', Fullcalendar);
Vue.component('VButton', Button);
Vue.component('select2-component',Select2);
Vue.component('my-image-cropper', Croppa.component)
Vue.component(HasError.name, HasError)
Vue.component(AlertError.name, AlertError)
Vue.component(AlertSuccess.name, AlertSuccess)

mounted: function(){// mounted part 
    this.$nextTick(function () {
        /**i have this code that give me property 'onClik' of undefined while [HMR] Checking for updates on the server**/
        this.$refs.table.onClik('.show-activity', function() {})
    }
} 

lead-management.blade.php

<datatable-component class="responsive table table-striped table-bordered"
    ref="table">
</datatable-component>

у меня есть свои активы в lead-management.blade.php

<link href="{{ mix('css/lead-management.css') }}" rel="stylesheet">
<script src="{{ mix('js/lead-management.js') }}" ></script>

webpack.mix.js

let mix = require('laravel-mix');

mix.js('resources/assets/js/lead-management', 'public/js')
	.sass('resources/assets/sass/lead-management.scss', 'public/css');