Data disappearing instead of being ordered accordingly

I'm trying to create a table using Vue 3 and DataTables from datatables.net. In my table I have text input fields and I need to be able to order my table. So for example in my table the Name column is a text input field so if I click on the order button by 'Name' I need the table to the order accordingly.

The issue I'm having is that when I click the order button my data dissappears.

Here is my vue file.

<template>
        <div style="width: 100%;"  class="p-5">
            <div class="card">
                <div class="card-body p-0">
                    <table class="table table-sm table-striped" id="users-table">
                        <thead>
                            <tr>
                                <th style="text-align: center;">Name</th>
                                <th style="text-align: center;">Email</th>
                                <th></th>
                            </tr>
                        </thead>

                        <tbody>
                            <tr v-for="user in users">
                                <td>
                                    <input type="text"
                                           name="userName"
                                            id="userName"
                                            class="form-control"
                                            v-model="user.name" @change="editUser(user)">
                                </td>

                                <td>
                                    <input type="text"
                                           name="userEmail"
                                            id="userEmail"
                                            class="form-control"
                                            v-model="user.email" @change="editUser(user)">
                                </td>

                                <td>
                                    <i class="fa fa-trash text-danger" style="cursor:pointer;" @click="deleteRow(user)"></i>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </template>

    <script>
        import $ from 'jquery';
        import DataTable from 'datatables.net-vue3'
        import DataTablesLib from 'datatables.net';
        DataTable.use(DataTablesLib);

        export default {
            props: ['users'],
            components: {
                DataTable
            },
            data() {
                return {
                    
                }
            },
            watch: {

            },
            computed: {

            },
            methods: {
            editRole(user){

            },
            deleteRow(user){

            }
        },
        beforeMount() {

        },
        mounted() {
           $('#users-table').DataTable();
        }
    </script>

    <style>
        @import 'datatables.net-dt';
    </style>