Display nested arrays in vue

I'm pretty new to vue and can get my way around this.

I'm receiving some JSON like this:

[
  {
    "name": "jack",
    "age": "twenty",
    "Colors": {
      "favorite": "blue",
      "hate": "orange",
      "surprise": "violet"
    },
   
    "Food": {
     "favorite": "barbecue",
      "hate": "broccoli",
      "surprise": "pasta"
      "new": [
        "pizza",
        "ice cream"
      ]
    }
  }
]

And I'm trying to get this:

Name: Jack

Age: Twenty

Colors

• Favorite: Blue
• Hate: Orange
• Surprise: Violet

Food

• Favorite: Barbecue
• Hate: Broccoli
• Surprise: Pasta
• New:
  • Pizza
  • Ice cream

HTML

<p><strong>Name:</strong> Jack</p>
<p><strong>Age:</strong> Twenty</p>
<p><strong>Colors</strong>
   <ul>
      <li><strong>Favorite:<strong> Blue</li>
      <li><strong>Hate:<strong> Orange</li>
      <li><strong>Surprise:<strong> Violet</li>
   </ul>
</p>
<p><strong>Food</strong>
   <ul>
      <li><strong>Favorite:<strong> Barbecue</li>
      <li><strong>Hate:<strong> Broccoli</li>
      <li><strong>Surprise:<strong> Pasta</li>
      <li><strong>New:<strong>
         <ul>
            <li>Pizza</li>
            <li>Ice cream</li>
        </ul>
     </li>
   </ul>
</p>

So I did this:

HTML

  <div v-for="(item, index) in items" :key="index">
       <div>
          <p><strong>{{title}}</strong> {{item}}</p>
          <p v-for="(category, index) in item" :key="index"><strong>{{index}}</strong> {{category}}</p>
       </div>
    </div>

Script

import axios from 'axios'
    export default {
        name: 'theComponent',
        props: {},
        data() {
            return {
                items: []
            }
        },
        mounted() {
            const url = 'https://api-json-url'
            axios.get(url)
                .then(response => {
                    this.items= response.data[0]
                })
        }
    };

But I'm getting this:

Name: Jack

0:J

1:a

2:c

3:k

Age: Twenty

0:T

1:w

2:e

3:n

1:t

2:y

Colors: {"favorite": "blue","hate": "orange","surprise": "violet"}

• Favorite: Blue
• Hate: Orange
• Surprise: Violet

Food {"favorite": "barbecue","hate": "broccoli","surprise": "pasta","new":["pizza","ice cream"]}

• Favorite: Barbecue
• Hate: Broccoli
• Surprise: Pasta
• New:["pizza","ice cream"]

HTML

    <p><strong>Name:</strong> Jack</p>
    <p><strong>0</strong>J</p>
    <p><strong>1</strong>a</p>
    <p><strong>2</strong>c</p>
    <p><strong>3</strong>k</p>
    <p><strong>Age:</strong> Twenty</p>
    <p><strong>0</strong>T</p>
    <p><strong>1</strong>w</p>
    <p><strong>2</strong>e</p>
    <p><strong>3</strong>n</p>
    <p><strong>1</strong>t</p>
    <p><strong>2</strong>y</p>
    <p><strong>Colors</strong> {"favorite": "blue","hate": "orange","surprise": "violet"}</p>
    <p>
       <ul>
          <li><strong>Favorite:<strong> Blue</li>
          <li><strong>Hate:<strong> Orange</li>
          <li><strong>Surprise:<strong> Violet</li>
       </ul>
    </p>
    <p><strong>Food</strong> {"favorite": "barbecue","hate": "broccoli","surprise": "pasta","new":["pizza","ice cream"]}</p>
    <p>
       <ul>
          <li><strong>Favorite:<strong> Barbecue</li>
          <li><strong>Hate:<strong> Broccoli</li>
          <li><strong>Surprise:<strong> Pasta</li>
          <li><strong>New:<strong>["pizza","ice cream"]</li>
       </ul>
    </p>

I think that I need something like isArray() with some v-if just before the first v-for. But I can't get there. I've tried with length also, but no.