I'm working on a project which i need to fetch "clients" data on a table. The data actually comes, but i can't manage to display it. Here's my template part, where i call for info with a 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>

On my DevTools, the data is shown:

Full DevTools with all errors (some of them are from other pages)

My script part:

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();
  },
};

That' what i managed to do, but it isn't working. Can anyone give me a hint of what am I doing wrong? Sorry for any rookie mistakes.