Vue 3 + DataTables.net: Data table does not update on filtering

When opening HomeView for the first time, the data table is populated with data, but when changing e.g. "Show 10 entries" to "Show 25 entries" the data table is left empty and data is never to be shown in the table again.

Note: I am not asking for suggestions of other data tables libraries to use.

I am importing the following libraries in main.ts:

import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'datatables.net-dt/js/dataTables.dataTables'
import 'datatables.net-dt/css/jquery.dataTables.min.css'
import 'jquery/dist/jquery.min.js';

HomeView.vue (View):

<template>
  <DataTable :dataSource="dataSource" />         
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import axios from 'axios'
import DataTable from '@/components/DataTable.vue'

const dataSource = ref([])

onMounted(async () => {
    const response = await axios.get("https://jsonplaceholder.typicode.com/users")
    dataSource.value = response.data
})
</script>

DataTable.vue (component):

<template>
    <div>
        <h1>Title</h1>
        
        <table class="table table-hover table-bordered" id="example">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="entry in dataSource" :key="entry.id">
                    <td>{{entry.id}}</td>
                    <td>{{entry.name}}</td>
                    <td>{{entry.email}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import { onMounted, withDefaults } from 'vue'
import $ from 'jquery'; 

interface Props {
    dataSource: Array
}

withDefaults(defineProps<Props>(), {
    dataSource: Array
})

onMounted(() => {
    $('#example').DataTable()
})

</script>