vue3 父组件获取数据传值给子组件，子组件有值，但是不渲染

问题所在就在于，父组件异步获取数据，传给子组件时候，子组件可能已经渲染出来了，所以数据虽然获取到了，但是并没有渲染。

父组件：

1.从接口获取数据

const annular2 = reactive({
  data: [],
  id: 'echart'
})
const getBusinessCensusFun = () => {
  getBusinessCensus().then((res: any) => {
    if (res.code === 200) {
      annular2.data = res.data
    }
  })
}

2.传给子组件

<Annular :annular="annular2" />

子组件：

interface PropsType {
  annular: {
    data:any,
    id:any
  };
}
const props = withDefaults(defineProps<PropsType>(), {
  annular: () => {
    return {
      data: [],
      id: ''
    }
  }
})

这个时候打印props,会发现有值，但是页面并没有渲染，这个时候就要用到watch监听传过来的值的数据变化

watch(props.annular, (oldvalue, newvalue) => {
console.log(newvalue) //newvalue就是父组件传过来的数据。
  //写你想操作的代码
}, { deep: true })