get data in Datatable Vuetify with axios get - vue.js

Question

I want to display the data coming from a get axios api, when I inspect the endpoint call it correctly returns an array with objects, but in the datatable it says that there is no data.
<template>
<v-app>
<v-card>
<v-card-title>
Usuários
<v-spacer></v-spacer>
<v-btn
color="primary"
#click="criarUsuario"
>
Criar Usuário
</v-btn><v-spacer></v-spacer>
<v-text-field
v-model="search"
append-icon="mdi-magnify"
label="Search"
single-line
hide-details
></v-text-field>
</v-card-title>
<v-data-table
:headers="headers"
:items="desserts"
:search="search"
></v-data-table>
</v-card>
<div
ref="modal"
class="modal fade"
:class="{show}"
tabindex="-1"
role="dialog"
>
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Criação de usuário</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
#click="criarUsuario"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form v-on:submit.prevent="cadastroUsuario">
<div class="mb-3">
<label for="formName" class="form-label">Nome</label>
<input class="form-control" type="text" v-model="nome" id="nome">
</div>
<div class="mb-3">
<label for="formSobrenome" class="form-label">Sobrenome</label>
<input class="form-control" v-model="sobrenome" type="text" id="sobrenome">
</div>
<div class="mb-3">
<label for="formLogin" class="form-label">Login</label>
<input class="form-control" v-model="login" type="text" id="login">
</div>
<div class="mb-3">
<label for="formEmail" class="form-label">E-mail</label>
<input class="form-control" v-model="email" id="email" type="text">
</div>
<div class="mb-3">
<label for="formSenha" class="form-label">Senha</label>
<input class="form-control" v-model="nova_senha" id="nova_senha" type="password">
</div>
<div class="mb-3">
<label for="formCPF" class="form-label">CPF</label>
<input class="form-control" v-model="cpf" id="cpf" type="text">
</div>
<div class="mb-3">
<button type="submit" class="btn btn-primary pull-right">Cadastrar</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</v-app>
</template>
<script>
import ActionButtonsUsers from "./Components/ActionButtonsUsers.vue"
import axios from "axios"
export default {
name: 'Usuarios',
data () {
return {
search: '',
user: [],
errors: [],
show:false,
headers: [
{
text: 'Código',
align: 'start',
value: 'sociedade_id',
},
{ text: 'Nome', value: 'sociedade_name' },
{ text: 'Login', value: '' },
{ text: 'CPF', value: '' },
{ text: 'Ações', value: 'actions', component: ActionButtonsUsers },
],
desserts: this.user,
}
},
methods: {
criarUsuario() {
console.log(this.user[0]['sociedade_id']);
setTimeout(() => (this.show = !this.show), 10);
},
cadastroUsuario(){
this.criarUsuario()
axios.post(process.env.VUE_APP_Back+"/usuarios", ({
nome: this.nome,
sobrenome: this.sobrenome,
login: this.login,
email: this.email,
nova_senha: this.nova_senha,
cpf: this.cpf
}))
.then((res) => {
res.send("Cadastro com sucesso!")
this.criarUsuario()
})
.catch((error) => {
console.log(error)
this.criarUsuario()
}).finally(() => {
this.criarUsuario()
});
}
},
created: function(){
axios.get(process.env.VUE_APP_Back+"/sociedades")
.then(response => {
this.user = response.data;
})
.catch(error => {
this.user = error.data;
});
}
}
</script>
The call does not display any kind of error, it just displays that "There is no data" when it makes a call on this.user it correctly displays the array of objects in the console.log.
Return response.data in API Axios
[{"sociedade_id":1,"sociedade_name":"Testando","sociedade_cnpj":"","sociedade_status":1,"sociedade_hash":null,"sociedade_data_criacao":"2020-04-14T16:35:14.000Z","sociedade_data_expiracao":null,"solicitante":0,"justificativa":""},{"sociedade_id":2,"sociedade_name":"Sociedade - Teste 2","sociedade_cnpj":"Teste 2","sociedade_status":1,"sociedade_hash":"6de22d12e678b1c03e0cb9f95812aaf36c973404","sociedade_data_criacao":"2020-04-14T16:35:14.000Z","sociedade_data_expiracao":"2020-05-23T23:16:32.000Z","solicitante":0,"justificativa":null}]

Answer 1

The variable that connected into the datatable is dessert not this.user so insted of using
This.user=response.data
Write
this.desserts=response.data
Or you can change the variable in the datatable component into user
<v-data-table :headers="headers" :items="user" :search="search" ></v-data-table>