JSFiddle - React, Tailwind, and code Playground

HTML

<div id="app">
  <div v-for="(item, index) in Object.entries(items[0])" :key="index">
    <div v-if="typeof item[1] !='object'">
      <p>
        <strong>{{item[0]}}:</strong> {{item[1]}}
      </p>
    </div>
    <div v-else>
      <p>
        <strong>{{item[0]}}:</strong>
        <ul>
          <li v-for="(innerItem, innerIndex) in  Object.entries(item[1]) ">
            <div v-if="!Array.isArray(innerItem[1])">
              <p>


                <strong>{{innerItem[0]}}:</strong>
                <span>{{innerItem[1]}}</span>
              </p>


            </div>
            <div v-else>
              <strong>{{innerItem[0]}}:</strong>

              <ul>
                <li v-for="(it2,in2) in innerItem[1]">{{it2}}</li>
              </ul>
            </div>
          </li>
        </ul>
      </p>
    </div>
  </div>


</div>

Vue

new Vue({
  el: '#app',
  data: {
     items: []
  },
  mounted(){
   this.items = [
  {
    name: "jack",
    age: "twenty",
    Colors: {
      favorite: "blue",
      hate: "orange",
      surprise: "violet"
     },
   
    Food: {
     favorite: "barbecue",
      hate: "broccoli",
      surprise: "pasta",
      new: [
        "pizza",
        "ice cream"
      ]
    }
  }
]

  }
})