v-for循环嵌套的子对象不能正常渲染

在Vue模板中，我们可以使用v-for指令来循环渲染数组或对象。然而，当我们需要在子对象中使用v-for指令时，可能会导致无法正常渲染。

例如，假设我们有以下子对象：

{
  name: 'Jack',
  age: 25,
  hobbies: ['reading', 'swimming', 'running'],
  contact: {
    email: 'jack@gmail.com',
    phone: '1234567890'
  }
}

如果我们想要循环渲染hobbies数组或contact对象，我们可以使用以下代码：

<ul>
  <li v-for="hobby in childObject.hobbies">{{ hobby }}</li>
</ul>
<div v-for="(value, key) in childObject.contact">
  {{ key }}: {{ value }}
</div>

然而，当我们在模板中使用类似于上面的代码时，可能会出现不能正确渲染子对象的问题。这是因为Vue不支持在子对象中使用v-for指令。

为了解决这个问题，我们可以使用计算属性来将子对象中需要循环的内容转换为数组，然后再使用v-for指令来循环渲染。

例如，我们可以使用以下代码来循环渲染hobbies数组和contact对象：

<template>
  <div>
    <ul>
      <li v-for="hobby in hobbies">{{ hobby }}</li>
    </ul>
    <div v-for="(value, key) in contactArray">
      {{ key }}: {{ value }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      childObject: {
        name: 'Jack',
        age: 25,
        hobbies: ['reading', 'swimming', 'running'],
        contact: {
          email: 'jack@gmail.com',
          phone: '1234567890'
        }
      }
    }
  },
  computed: {
    hobbies() {