Is there a way of displaying the value of an object inside an array?

I’m building a component on my project, which is actually getting all the data and console logging it, but here’s the problem: Inside my array of clients, i have some objects (address, documents, …), and i can’t manage to call them on my table.

My script:

<script>
export default {
  data: () => ({
    clients: [],
  }),

  methods: {
    getClients() {
      this.$api
        .get("/api_v1/clientes", {
        })
        .then((response) => {
          this.clients = response.data[0];
          console.log(response.data);
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },

  mounted() {
    this.getClients();
  },
};
</script>

My table (inside ):

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

            <td>
              <a :href="`/see-client/${client.id}`"
                ><i class="icon-magnifier"></i
              ></a>

              <i class="icon-check" style="color: green"></i>
              <i class="icon-close" style="color: red"></i>
            </td>
          </tr>
        </tbody>

My controller:

  public function index(Request $request)
    {
        $data = [
            'pag' => 'All clients',
            'link' => '/'
        ];

        return view('clients.index', $data);
    }

The data:

Someone have a clue of a different approach i could have? I’m using Vue2. It’s one of my first big projects, so previously sorry for any rookie mistake. Thanks for your time and help!