I am trying to add datatables into my vite vuejs Application but getting an error while using it. Here is my error.

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

Here is my packages list.

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

and here is my code.

<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>

I already trying to do it with standard HTML from like adding link and script tag to index.html file of vuejs app. working fine but hot reload is not working for the datatable, I always need to refresh the page to see the datatables impact.