Estoy tratando de agregar tablas de datos en mi aplicación vite vuejs pero obtengo un error al usarla. Aquí está mi error.

 "Uncaught (in promise) TypeError: $(...).DataTable is not a function"

Aquí está mi lista de paquetes.

• jquery
• datatables.net-dt
• oreja
• axios

y aquí está mi código.

 <template> <div> <h2>Implement jQuery DataTable in Vue Js</h2> <table class="table" id="datatable"> <thead> <tr> <th>ID</th> <th>Product Title</th> <th>Product Price</th> <th>Created On</th> </tr> </thead> <tbody> <tr v-for="item in products" :key="item.id"> <td>{{ item.userId }}</td> <td>{{ item.id }}</td> <td>{{ item.title }}</td> <td>{{ item.completed }}</td> </tr> </tbody> </table> </div> </template> <script> import 'jquery/dist/jquery.min.js'; import 'bootstrap/dist/css/bootstrap.min.css'; import "datatables.net-dt/js/dataTables.dataTables" import "datatables.net-dt/css/jquery.dataTables.min.css" import axios from 'axios'; import $ from 'jquery'; export default { mounted() { axios.get("https://jsonplaceholder.typicode.com/todos").then((response) => { this.products = response.data; $("#datatable").DataTable(); }); }, data: function () { return { products: [], }; }, }; </script>

Ya estoy tratando de hacerlo con HTML estándar, como agregar un enlace y una etiqueta de secuencia de comandos al archivo index.html de la aplicación vuejs. funciona bien, pero la recarga en caliente no funciona para la tabla de datos, siempre necesito actualizar la página para ver el impacto de las tablas de datos.