How to include datatable in vue.js?

Question

JavaScript

1. It was not possible to connect through the official method:

I inserted this code into src/main.js. Result:

The error is clear, but how to use the variable from main.js in someComponent.vue is not clear.

2. Googled this way:

import $ from 'jquery';
    import dt from 'datatables.net-bs4';
    $.fn.DataTable = dt;
    
    export default {
       ...
        $('#myTable').DataTable({ });
        ...
    }

It helped, but there was another problem. The table is displayed in the Show.vue component that serves the route:
info/history/:type (type: current, closed). When switching from current to closed, only the route in the browser line changed, but the table is not redrawn without watch for $route:

watch: {
            $route() {
                this.loadInfo();
            }
        },

And in this case, the DataTable starts to swear that it cannot recreate the table:


I tried to solve it using the clear / destory removal methods built into the DataTable:

if(this.dataTable !== undefined) {
                    this.dataTable.destroy(); // Удаляю прежнюю таблицу перед созданием новой
                }

But the DataTable says it can't find the destroy method:


The complete code looks like this:

<script>
    import $ from 'jquery';
    import dt from 'datatables.net-bs4';
    $.fn.DataTable = dt;

    export default {
        store,
        data() {
            return {
                dataTable: undefined,
                table: [],
            }
        },

        watch: {
/* Чтобы подгружать новые данные с сервере при переходе с type = current на type = closed и обратно */
            $route() {
                this.loadInfo();
            }
        },
        methods: {
            async loadInfo() {
 /* Получили данные из DB */
                await axios.get('/api/data/' + this.$route.params.type + '?page=' + this.$route.query.page)
                    .then(({data}) => {
                        this.table = data.infoFromDb;
                    });

/* По документации это должно удалять старую таблицу */
                if(this.dataTable !== undefined) {
                    this.dataTable.destroy();
                }

/* Применяю DataTable*/
                this.dataTable = $('#myTable').DataTable({ });
            }
        },
        mounted() {
            this.loadInfo();
        },
    }
</script>

Total:
1. Perhaps I'm connecting the datatable incorrectly...
2. Perhaps instead of watch -> $route, there is another way to force vue to re-render the component from 0, then the "Uncaught (in promise) TypeError: _this.dataTable.destroy" errors simply will not occur .
3. I did not find convenient analogues of dataTable.
What do you advise?

Answer 1

Why datatables? There are better solutions without the need to include jQuery. vue-tables-2, vue-tables-2

Answer 2

Have you tried that?
...
var
that = this;
....
$('#myTable').DataTable().destroy();
....
this.$nextTick(function(){
that.table = $('#myTable').DataTable({
});
....