无法将对象从Nuxt.js页传递到带有属性的Vue组件。未定义的属性变量

<template>
  <div>
    <ChildComponent :data="myData" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      myData: { name: 'John', age: 25 }
    }
  }
}
</script>

<template>
  <div>
    <p>Name: {{ data.name }}</p>
    <p>Age: {{ data.age }}</p>
  </div>
</template>

<script>
export default {
  props: ['data']
}
</script>

<template>
  <div>
    <p>Name: {{ name }}</p>
    <p>Age: {{ age }}</p>
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      required: true
    },
    age: {
      type: Number,
      required: true
    }
  }
}
</script>

<template>
  <div>
    <ChildComponent v-if="myData" :data="myData" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      myData: null
    }
  },
  mounted() {
    // 异步获取数据
    fetchData().then(data => {
      this.myData = data;
    });
  }
}
</script>