vue3+ts实现父传子不能马上获取到数据？

Question

// 这是父组件调用子组件
<div v-else-if="editableTabsValue === '流量'">
    <SystemEcharts :TrafficChartDatas="TrafficChartDatas"/>
</div>

这个是传的值的类型

子组件

interface Props {
    TrafficChartDatas: {
    in:{timestamp: number;value:number}[];
    out:{timestamp: number;value:number}[]
  };
}
// 这个是子组件 接受父组件传过来的值
let props = defineProps<Props>()
const {TrafficChartDatas} = toRefs(props)
// 不能立马获取到数据
console.log(props.TrafficChartDatas);

watch(
  props.TrafficChartDatas,
  (newProps) => {
    TrafficChartDatas.value = newProps
  }
)
// 这里需要用到TrafficChartDatas.in的值去遍历形成新的数组
const data = (() => {
  let res: string[] = [];
  TrafficChartDatas.value.in.forEach((item) => {
    res.push(String(item.value))
  })
  return res;
})();

console.log的时候不能立马获取的数据
应该怎么解决这个问题

Answer 1

有没有可能 TrafficChartDatas 是后赋值的？
试一下 <SystemEcharts :TrafficChartDatas="TrafficChartDatas" v-if="TrafficChartDatas.in.length"/> 有值的时候再去渲染组件