How to implement Datatable with Vue.js

UrielGlz_

I currently have this implementation, but somehow I can't load the properties after filling the table

Js.

var url = "ajax/users.ajax.php";
var TableName = "users";~~~~
var appUsers = new Vue({
    el: '#appUsers',
    data: {
        txtNombre:"",
        txtUsuario:"",
        txtPassword:"",
        txtCorreo:"",
        roles:[],
        users:[]
    },
    methods:{
        //Buttons click
        btnCreate: async function() {
            var dato = $("#").val();
        },
        btnEdit: async function() {
        },
        btnDelete: function(){
        },
        //Procedures
        DestroyTable: function() {
            var table = $('.' + TableName).DataTable();
            table.destroy();
        },~~~~      
        CreateTable: function() {
            $('.' + TableName).DataTable({
                "bPaginate": false,
                "bFilter": false,
                "bInfo": false,~~~~                
                "lengthMenu": [
                    [5, 10, 20, -1],
                    [5, 10, 20, "Todos"]
                ]
            });
        },
        //GetAllUser
        GetUsers: function (){
            //datos.append("GetUsersAjax", 1);
            this.DestroyTable();
            axios.post(url,{GetUsersAjax:1}).then(response => {
                this.users = response.data;
                //console.log (this.users);
                var table = $('.' + TableName).DataTable();
                table.destroy();
                this.CreateTable();
            });

        }
    },
    created: function(){
        this.GetUsers();
    },
    mounted: function (){
      this.$PropTable(function (){
        $('.' + TableName).DataTable({
            "bPaginate": false,
            "bFilter": false,
            "bInfo": false,     
            "lengthMenu": [
                [5, 10, 20, -1],
                [5, 10, 20, "Todos"]
            ]
        });

      });
    },
    computed:{}
});

HTML.

                        <table id="data_table" class="table users">
                            <thead>
                                <tr>
                                    <th>Nombre</th>
                                    <th class="nosort">User</th>
                                    <th>Email</th>
                                    <th>Avatar</th>
                                    <th class="nosort">&nbsp;</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(user,i) of users">
                                    <td>{{user.us_nombre}}</td>
                                    <td>{{user.us_usuario}}</td>
                                    <td>{{user.us_correo}}</td>
                                    <td><img src="views/img/users/2.jpg" class="table-user-thumb" alt=""></td>
                                    <td>
                                        <div class="table-actions">
                                            <a href="#"><i class="ik ik-eye text-green"></i></a>
                                            <a href="#"><i class="ik ik-edit-2 text-green"></i></a>
                                            <a href="#"><i class="ik ik-trash-2 text-red"></i></a>
                                        </div>
                                    </td>
                                </tr>                               
                            </tbody>
                        </table>

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.