父组件异步获取数据传给子组件获取不到

最近封装了个echarts图表的子组件,发现父组件中数据从接口获取后，传递给子组件时，在子组件的created函数中取不到，代码是这样的

父组件：

  <el-tabs v-model="attributeName">
    <el-tab-pane label="用户数量" name="first">
      <Charts v-if="attributeName === 'first'" :barData="bardatas.count" type="bar" />
    </el-tab-pane>
    <el-tab-pane label="用户金额" name="second">
      <Charts v-if="attributeName === 'second'" :barData="bardatas.money" type="bar" />
    </el-tab-pane>
  </el-tabs>

子组件：

  props: ["barData"],
  mounted() {
    console.log(barData)  // undefined
  }

后来发现接口数据barData是异步获取的，而父子组件的加载顺序是：
父_beforeCreate => 父_ created => 父_ beforeMount => 子_ beforeCreate => 子_created => 子_beforeMount => 子_mounted => 父_ mounted
所以子组件获取到的是父组件data函数中的数据，初始绑定的数据，请求接口数据是在父组件的created函数中，根本获取不到接口数据。

解决方案：

方案一： 给子组件绑定v-if，判断数据是否存在，等父组件有数据了再渲染子组件(那个tab首次加载就绑定那个就可以)

父组件：

  <el-tabs v-model="attributeName">
    <el-tab-pane label="用户数量" name="first">
      <Charts v-if="(attributeName === 'first') && (Object.keys(bardatas).length !== 0)" :barData="bardatas.count" type="bar" />
    </el-tab-pane>
    <el-tab-pane label="用户金额" name="second">
      <Charts v-if="attributeName === 'second'" :barData="bardatas.money" type="bar" />
    </el-tab-pane>
  </el-tabs>