Estoy trabajando en un proyecto que necesito para obtener datos de "clientes" en una tabla. Los datos realmente vienen, pero no puedo mostrarlos. Aquí está la parte de mi plantilla, donde llamo para obtener información con un v-for.

 <tbody> <tr v-for="item in clients" v-bind:key="item.id"> <td>{{ item.id }}</td> <td>{{ item.name }}</td> <td>{{ item.email }}</td> <td>{{ item.documents.cpf || item.documents.cnpj }}</td> <td>{{ item.documents.celular }}</td> <td>{{ item.status }}</td> <td v-if="item.address"> {{ `${item.address.localidade} / ${item.address.uf}` }} </td> <td v-else>-</td> <td> <a :href="`/ver-cliente/${item.id}`" ></a> </td> </tr> </tbody>

En mis DevTools, se muestran los datos:

DevTools completo con todos los errores (algunos de ellos son de otras páginas)

Mi parte del guión:

 export default { data: () => ({ clients: [], paginationData: { lastPage: 0, currentPage: 1, }, loading: false, }), methods: { getClients(page = 1) { this.loading = true; this.$api .get("/api_v1/clientes", { params: { page }, }) .then(({ data }) => { console.log(data); if (data.success) { const { data: result, per_page, total, last_page, current_page, } = data.data; this.clients = result; this.paginationData = { perPage: per_page, total, lastPage: last_page, currentPage: current_page, }; } }) .finally(() => (this.loading = false)); }, }, mounted() { this.getClients(); }, };

Eso es lo que logré hacer, pero no está funcionando. ¿Alguien puede darme una pista de lo que estoy haciendo mal? Lo siento por cualquier error de novato.