Vue JS Simple loop - Uncaught (in promise) TypeError: Cannot read properties of null (reading 'insertBefore') - vue.js

Question

I'm trying to update a table using bootstrap-table.
https://bootstrap-table.com/
The library is correctly loaded, but then when I update my data, I have :
This is my simple vue component :
<template>
<button #click="this.updateArtists">Click</button>
<table
v-if="this.artists"
id="table"
data-pagination="true"
data-search="true"
>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr v-for="artist in this.artists" :key="artist.id">
<td>{{ artist.id }}</td>
<td>{{ artist.name }}</td>
</tr>
</tbody>
</table>
</template>
<script>
import $ from "jquery";
import "bootstrap-table/dist/bootstrap-table.min";
import "bootstrap-table/dist/locale/bootstrap-table-fr-FR";
export default {
name: "Test",
data: function () {
return {
labels: null,
artists: null,
};
},
methods: {
updateArtists: function () {
this.artists = [
{
id: 4,
name: "name_4",
},
{
id: 5,
name: "name_5",
},
{
id: 6,
name: "name_6",
},
];
},
},
beforeCreate: async function () {
const labels = this.axios.get("/labels");
await Promise.all([labels]).then(([labels]) => {
this.labels = labels.data;
this.artists = [
{
id: 1,
name: "name_1",
},
{
id: 2,
name: "name_2",
},
{
id: 3,
name: "name_3",
},
];
});
$("#table").bootstrapTable();
},
};
</script>
<style scoped></style>
I don't understand how vue can find a properties of null ?
Of course when i comment the line $("#table").bootstrapTable();
There is no more problem.
I have no problem without bootstrap table loaded. However, when I load the package, initialize my table. Then when I click on the update button, the warning and the error are flag.
With this code, the table is render well with bootstrap table, but the update fail ("done" is never fire):
Updated Code:
<template>
<button #click="this.updateArtists">Update</button>
<table
v-if="this.artists"
id="table"
data-pagination="true"
data-search="true"
>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr v-for="artist in this.artists" :key="artist.id">
<td>{{ artist.id }}</td>
<td>{{ artist.name }}</td>
</tr>
</tbody>
</table>
</template>
<script>
import $ from "jquery";
import "bootstrap-table/dist/bootstrap-table.min";
import "bootstrap-table/dist/locale/bootstrap-table-fr-FR";
export default {
name: "Test",
data: function () {
return {
labels: null,
artists: null,
};
},
methods: {
updateArtists: function () {
this.artists = [
{
id: 4,
name: "name_4",
},
{
id: 5,
name: "name_5",
},
{
id: 6,
name: "name_6",
},
{
id: 7,
name: "name_7",
},
];
this.$nextTick(() => {
console.log("done");
});
},
},
mounted: async function () {
const labels = this.axios.get("/labels");
await Promise.all([labels]).then(([labels]) => {
this.labels = labels.data;
this.artists = [
{
id: 1,
name: "name_1",
},
{
id: 2,
name: "name_2",
},
{
id: 3,
name: "name_3",
},
];
this.$nextTick(() => {
$("#table").bootstrapTable();
});
});
},
};
</script>
<style scoped></style>
Sandbox: https://codesandbox.io/s/zen-feynman-w8fobn?file=/src/App.vue