一个关于vue子组件props数据的奇怪问题。

Question

我想自己封装一个带有搜索功能的表格组件，于是创建了一个子组件tableWithSearch

<template>

{{tableData}} <!-- a.此处看父组件传过来的值-->
<div>
    <table :column="tableColumn" :data="tableDataAfterSearch"></table>
<div> </template> <script>
export defualt{
    props:{
        tableColumn:{
            required:true
        },
        tableData:{
            required:true
        }
    },
     methods:{
         initData(){
             //这里是吧tableData转换成tableDataAfterSearch的方法
             console.log(this.tableData) //b.第二个shu'chu
         }
     }
} </script>

</template>

父组件中，在mounted时从后台用axios获取数据，然后用this.$ref.searchTable调用子组件的init方法，结果a出的输出是正常的后台取到的值而b处的输出则是空。父组件中添加一个按钮，按钮触发取数的函数后，ab两处才都是正常的数。
这个是什么回事？

Answer 1

computed:{
tableDataAfterSearch(){

return    this.tableData

}
}

Answer 2

补充一下，问题是父组件异步获取数据传值给子组件上的。所以采用后再子组件用watch监听数据，一旦有变化在做相应的转变