vue v-if 之后子组件watch监听不到父组件数据变化

场景 父子组件传参

父组件一共有4个子组件 tab切换 对应加载子组件

最开始的代码

//父组件
<div  v-show="currentFlag == child1">
    <child1   :data="data"></child1>
</div>
<div  v-show="currentFlag == child2">
    <child2  :data="data"></child2>
</div>
//子组件
watch:{
data(val){
    console.log(val)//  可以监听到数据
}
}

之前的代码 如上 大概是这样，但是之后做优化，第一个加载的组件请求返回很慢, 一次性的要加载四个页面里面初始化的请求，所以用了 v-if 只有条件达成 才会加载组件，也就是说子组件会一个一个的加载，但是按照上面的子组件监听方法时监听不到data的变化的，（个人分析可能是跟最开始的组件挂载有关系）,所以子组件深度监听，最终代码

<div  v-if="currentFlag == child1">
    <child1   :data="data"></child1>
</div>
<div  v-else-if="currentFlag == child2">
    <child2  :data="data"></child2>
</div>
//子组件
watch:{
data:{
    handler(val){
    console.log(val)//  可以监听到数据
    },
    deep:true,
    immediate:true// 监听的数据 如果是初始值要不要执行
}
}