Горячая замена модуля: [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] App горячее обновление...
[HMR] Проверка обновлений на сервере...
[Vue warn]: ошибка в смонтированном хуке: "Ошибка типа: невозможно прочитать свойство" onClik "из неопределенного" (найдено в Root)
Ошибка типа: невозможно прочитать свойство 'onClik' из неопределенного
[Vue warn]: Ошибка в nextTick: "Ошибка типа: невозможно прочитать свойство" onClik "из неопределенного" (найдено в Root)
Ошибка типа: невозможно прочитать свойство 'onClik' из неопределенного
[HMR] Обновлены модули:
[HMR] -./resources/assets/js/lead-management.js
[HMR] Приложение обновлено.

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

ресурсы / активы / JS / свинцово-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() {})
    }
} 

свинцово-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');