Estoy desarrollando un spa en vuejs y para mostrar los datos utilizo dataTables, tengo los botones de crear un nuevo registro, editar y ver la información y estoy realizando uso de modales, pero estoy presentando problemas en el modo responsive en dispositivos móviles no se me visualizan los datos y a la hora de abrir el modal de editar no me abre tampoco, solo abre el modal de crear.

**Template:**

   

    <template>
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <div class="row">
                            <div class="col-auto mr-auto">
                                <h2 class="text-secondary">Lista de Usuarios</h2>
                            </div>
                            <div class="col-auto">
                                <button class="right btn btn-primary btn-sm" v-b-modal.modal-1 @click="showModal = true">Agregar</button>
                            </div>
                        </div>
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body">
                        <table id="tblUser" class="table table-bordered table-hover dt-responsive">
                            <thead>
                                <tr>
                                    <th>Usuario</th>
                                    <th>Nombre</th>
                                    <th>Email</th>
                                    <th>Perfil</th>
                                    <th>Estado</th>
                                    <th>Opciones</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(user, index) in users" :key="index">
                                    <td>{{ user.username }}</td>
                                    <td>{{ user.name }}</td>
                                    <td>{{ user.email }}</td>
                                    <td>{{ user.profile }}</td>
                                    <td class="activate" v-if="user.deleted_at == null">Activado</td>
                                    <td class="desactivate" v-else>Desactivado</td>
                                    <td>
                                        <button class="btn btn-info btn-sm">Detalle</button>
                                        <button class="btn btn-warning btn-sm" v-b-modal.editUser @click="editUser(user)" >Editar</button>                                        
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <!-- /.card-body -->
                </div>
                <!-- /.card -->
            </div>
            <!-- /.col -->
        </div>

    <!-- Modal Para Agregar Usuarios -->
    <AddUser ref="userModal" @reload="getUsers"></AddUser>

    <!-- Modal Para Editar Usuarios -->
    <EditUser ref="editModal" :editUser="this.dataEditUser" :statusUser="this.status" @reload="getUsers"></EditUser>

    </div>

</template>


**Script:**

    <script>
   
    // Services
    import * as userService from '../../services/user';
    // Components
    import AddUser from '../../components/Admin/AddUser.vue';
    import EditUser from '../../components/Admin/EditUser.vue';
    export default {
        data() {
            return {
                users: [],
                dataEditUser: {},
                status: ''
            }
        },
        mounted() {            
            this.getUsers();
        },
        components: {
            AddUser,
            EditUser
        },
        methods: {
            dataTable() {
                this.$nextTick(() => {
                    $('#tblUser').DataTable({
                        "ordering": false,
                        // "columnDefs": [
                        //     { "width": "5%", "targets": 3 }
                        // ],
                        language: {
                            "sProcessing": "Procesando...",
                            "sLengthMenu": "Mostrar _MENU_ registros",
                            "sZeroRecords": "No se encontraron resultados",
                            "sEmptyTable": "Ningún dato disponible en esta tabla",
                            "sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
                            "sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
                            "sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
                            "sInfoPostFix": "",
                            "sSearch": "Buscar:",
                            "sUrl": "",
                            "sInfoThousands": ",",
                            "sLoadingRecords": "Cargando...",
                            "oPaginate": {
                                "sFirst": "Primero",
                                "sLast": "Último",
                                "sNext": "Siguiente",
                                "sPrevious": "Anterior"
                            },
                            "oAria": {
                                "sSortAscending": ": Activar para ordenar la columna de manera ascendente",
                                "sSortDescending": ": Activar para ordenar la columna de manera descendente"
                            }
                        },
                    });
                });
            },
            
            getUsers: async function() {
                try {
                   
                    const response = await userService.getUsers();                               
                    if(response.status == 200) {
                        this.users = response.data.data;
                        this.reloadTable();                            
                    }
                } catch (error) {
                     console.log(error);
                    if (error.response.status == 422){
                        console.log(error);
                    }
                }
            }, 
            editUser(user) {
                this.dataEditUser = user;
                if (user.deleted_at == null) {
                    this.status = 'Activado';
                }else {
                    this.status = 'Desactivado';
                }
            },
                reloadTable() {
                $('#tblUser').DataTable().destroy();               
                this.dataTable();
            },
            makeToast(title, text, type) {                
                this.$bvToast.toast(text, {
                    title: title,
                    variant: type,
                    autoHideDelay: 4000,
                    appendToast: true,
                    solid: true
                })
            },
            
        }
    }
</script>
        

**Librerias que tengo para dataTable:**



        //Bootstrap
    require('./bootstrap');
    import 'bootstrap/dist/css/bootstrap.min.css';
    import 'bootstrap-vue/dist/bootstrap-vue.css';
    import { BootstrapVue, IconsPlugin } from 'bootstrap-vue';
    
    //DataTables
    import 'datatables.net-bs4';
    import 'datatables.net/js/jquery.dataTables.min.js';
    import 'datatables.net-bs4/css/dataTables.bootstrap4.min.css';
    import 'datatables.net-bs4/js/dataTables.bootstrap4.min.js';
    import 'datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css';
    import 'datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js';
    
    //Rutas
    import router from './routes';
    
    Vue.use(BootstrapVue);
    
    const app = new Vue({
     el: '#app',
     store,
     router,
    });


**Imagen en dispositivo móvil**
[![introducir la descripción de la imagen aquí][1]][1]


He intentado cambiar de versión de dataTables y agregando la clase dt-responsive a la tabla pero no se me visualizan los datos en mobile.



Gracias


  [1]: https://i.sstatic.net/IzUto.jpg