Vue: How to get rid of duplicate content

Question

I have an array of names using v-for I get the names, as you can see I have two v-fors where the content is duplicated in this example my content is small and doesn't look so scary in real life it can be much bigger and all the problem is that the content is repeated, I tried to apply slots but could not cope

Template

<template>
  <div>
    <div v-for="(item, index) in array" :key="index" class="names">
      <div class="show-names">
        <p>{{ item.name }}</p>
      </div>
      <div
        v-for="(girlNames, index) in item.girlNames"
        :key="index"
        class="names"
      >
        <div class="show-names">
          <p>{{ girlNames.name }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

Script

<script>
export default {
  data() {
    return {
      array: [
        { name: "Alex" },
        { name: "Jacob" },
        { name: "Robert" },
        {
          girlNames: [
            {
              name: "Anna",
            },
            {
              name: "Kiwi",
            },
            {
              name: "Ava",
            },
          ],
        },
      ],
    };
  },
};
</script>

Yes, this picture shows where the content is repeated

You can also see code example in codesandbox