Javascript Vue父组件道具未传递给子组件

我想在父组件中使用axios从DB获取新数据，并将该数据传递给子组件。但父组件传递旧数据（尚未使用axios更新）

我认为这不是axios的问题。因为我可以在父组件中看到使用axios更新的新数据。但父组件不会将其传递给子组件

父组件

<template>
<div>
    <p>{{itemData}}</p>
    <child v-bind:propsData="itemData"/>
</div>
</template>

<script>

import Child from './Child.vue'

export default {

  components: {
    Child,
  },

  data(){
    return {
      itemData: {
          title : 'OLD TITLE'
      }
    }
  },

  async created() {
    this.itemData = await this.$axios.get("/rest/getItem/");
    this.itemData = this.itemData.data;
  },

}
</script>

<template>
    <div class="child">
        <li>{{title}}</li>
    </div>
</template>

<script>
export default {
    props: {
      propsData: {
        type: Object
      }
    },

    data(){
        return{
            title: this.propsData.title
        }
    }, 
}
</script>

预期结果

{"title" : "NEW TITLE"}

NEW TITLE

改用一个计算的

<script>
export default {
    props: {
      propsData: {
        type: Object
      }
    },

    computed(){
        title(){
          return this.$props.propsData.title
        }
    }, 
}
</script>

导出默认值{
道具：{
propsData：{
类型：对象
}
},
计算（）{
标题（）{
返回此。$props.propsData.title
}
}, 
}

您可以看到存在一些问题，但它们只是语法上的问题。尝试使用不同的大小写（并等待文本更改-3s）：

Vue.component（'my-component'）{
道具：['propsData']，
模板：'{{propsData.title}}
'
})
新Vue({
el:“应用程序”，
数据：{
项目数据：{
标题：“旧标题”
}
},
安装的（）{
const self=this
//模拟异步调用：
setTimeout（函数（）{
self.itemData.title='新标题'
}, 3000)
}
})

---

你不是在给孩子讲课，而是在说我错了。这不是问题所在。我只是打错了。我现在编辑了。

<script>
export default {
    props: {
      propsData: {
        type: Object
      }
    },

    computed(){
        title(){
          return this.$props.propsData.title
        }
    }, 
}
</script>