Datatable data in vuejs and laravel is not showing on mobile - laravel

Question

I am working with laravel and vuejs I show the data with dataTable, in the mobile version it does not show me the api data, the problem is in the mobile version that is not shown, in the desktop version if the data is shown, the edit buttons do not open in mobile version either. I have tried link an api from the internet and if it shows me the data.
Controller:
<?php
namespace App\Http\Controllers\Admin;
use Illuminate\Http\Request;
use Illuminate\Validation\Rule;
use App\Models\Admin\Dependence;
use App\Http\Controllers\Controller;
use App\Http\Controllers\ResponseApiController;
class DependenceController extends ResponseApiController
{
public function getDependencies()
{
$dependencies = Dependence::orderBy('created_at', 'desc')->get();
$message = $this->sendResponse($dependencies, 'Dependencias listadas correctamente');
return $message;
}
}
Route:
Route::get('dependencies', 'Admin\DependenceController#getDependencies');
Vue - Libraries in global file:
//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';
//DataTable Global
Vue.prototype.$tableGlobal = function(table) {
this.$nextTick(() => {
$(table).DataTable();
});
}
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">Dependencies List</h2>
</div>
<div class="col-auto">
<button class="right btn btn-primary btn-sm" v-b-modal.modal-1 #click="showModal = true">Add</button>
</div>
</div>
</div>
<!-- /.card-header -->
<div class="card-body animated fadeIn">
<table id="tblDependencies" class="table table-bordered table-hover dt-responsive">
<thead>
<tr>
<th>Description</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<tr v-for="dependence in dependencies" :key="dependence.id">
<td>{{ dependence.description }}</td>
<td>
<!-- Change Status -->
<b-button size="sm" #click="statusUpdate(dependence)" class="mr-1" :class="[dependence.status == 1 ? 'btn-success' : 'btn-danger']">
<b-icon :icon="dependence.status == 1 ? 'check' : 'x' "></b-icon>
</b-button>
<!-- Edit -->
<b-button v-b-modal.editDependence size="sm" #click="editDependence(dependence)" class="btn btn-warning">
<b-icon icon="pencil-fill"></b-icon>
</b-button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
</div>
<AddDependence ref="dependenceModal" #reload="getDependencies"></AddDependence>
<EditDependence ref="editModal" :editDependence="this.dataEditDependence" #reload="getDependencies"></EditDependence>
</div>
</template>
<script>
// Services
import * as dependenceService from '../../services/dependence';
// Components
import AddDependence from '../../components/Admin/Dependence/AddDependence.vue';
import EditDependence from '../../components/Admin/Dependence/EditDependence.vue'
export default {
data() {
return {
dependencies: [],
dataEditDependence: {}
}
},
mounted() {
this.getDependencies();
},
components: {
AddDependence,
EditDependence
},
methods: {
getDependencies: async function() {
try {
const response = await dependenceService.getDependencies();
if(response.status == 200) {
this.dependencies = response.data.data;
this.reloadTable();
}
} catch (error) {
this.loading = false
console.log(error);
if (error.response.status == 422){
console.log(error);
}
}
},
statusUpdate: async function(dependence) {
try {
const response = await dependenceService.activateDesactivate(dependence.id);
if (response.status == 200) {
if(response.data.data.status == 1) {
dependence.status = 1;
}else {
dependence.status = 0;
}
this.$alerta('Actualizado', 'Estado actualizado correctamente', 'success');
this.reloadTable();
}
} catch (error) {
console.log(error);
}
},
editDependence(dependence) {
this.dataEditDependence = dependence;
},
reloadTable() {
$('#tblDependencies').DataTable().destroy();
this.$tableGlobal('#tblDependencies');
},
}
}
</script>
http_service:
import store from '../store';
import axios from 'axios';
export function http() {
return axios.create({
baseURL: store.state.apiURL,
});
}
Service:
import {http} from './http_service';
export function getDependencies() {
return http().get('/dependencies');
}