hi i have problem im using datatable.net-vue3 and inertia so i have component reusable

"datatables.net-dt": "^2.1.7",
"datatables.net-vue3": "^3.0.2",
///

import $ from 'jquery'; import DataTable from 'datatables.net-vue3'; import DataTablesLib from 'datatables.net'; import "datatables.net-dt/css/dataTables.dataTables.min.css"; DataTable.use(DataTablesLib); import { ref } from "vue"; const props = defineProps({ headers: Array, items: Array, }); const dataTableOptions = ref({ paging: true, searching: true, order: [], language: { search: "Recherche:", info: "Affichage de _START_ à _END_ sur _TOTAL_ entrées", lengthMenu: "Afficher _MENU_ entrées", emptyTable: "Aucune donnée disponible", zeroRecords: "Aucun enregistrement correspondant trouvé", infoEmpty: "Affichage de 0 à 0 sur 0 entrées", infoFiltered: "(filtré de _MAX_ entrées)", }, initComplete: function () { const api = this.api(); api.columns().every(function (index) { let column = this; // Skip the last column if (index < api.columns().count() - 1) { // Create input element let input = document.createElement('input'); input.placeholder = `Filtrer ${column.header().textContent}`; input.className = 'form-control form-control-sm'; // Append input to the respective header cell $(column.header()).html(input); // Event listener for user input input.addEventListener('keyup', () => { if (column.search() !== input.value) { column.search(input.value).draw(); } }); } else { $(column.header()).html(''); } }); }, });

<template>
<Division class="table-responsive">
<DataTable :options="dataTableOptions" class="display table">
<thead>
<tr>
<th v-for="header in headers" :key="header">{{ header }}</th>
</tr>
<tr data-dt-order="disable">
<th v-for="header in headers" :key="header">{{ header }}</th>
</tr>
</thead>
<tbody>
<slot name="tbody" />
</tbody>
</DataTable>
</Division>
</template>

<style scoped>
.table-responsive {
min-height: 500px;
}
</style>
i have this components so in index i have used like this
<DataTable :items="subRentals" :headers="['Réf', 'Sous-traitant', 'Actions']">
<template #tbody>
<tr v-for="subRental in subRentals" :key="subRental.id" class="text-sm">
<td>
<SimpleLink v-tooltip="Voir le contrat en PDF" :href="/p/sub-rental/${subRental.id}">{{ subRental.ref }}</SimpleLink>
</td>
<td>{{ subRental.company.name }}</td>

                            <td>
                                <Division class="dropdown position-relative">
                                    <Button class="btn btn-sm btn-outline-primary rounded dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
                                        Actions
                                    </Button>
                                    <ul class="dropdown-menu dropdown-menu-end text-sm" aria-labelledby="dropdownMenuButton">
                                            <li><Button class="dropdown-item text-success" @click="closeSubRentalFunc(subRental)">Fermer sous-location</Button></li>

                                    </ul>
                                </Division>
                            </td>
                        </tr>
                    </template>
                </DataTable>

when i close an subRental i lclosed with form PUT on modal make it closed so it should removed from datatable but it stack like datatable preserve old state this the problem

and i juust change the databale.net i was used but when i have one record on datatable it stack and show error of nextSubling on null