vue data中的多层项赋值问题

Question

我vue组件childEle的data中有一个类似下方所示的form项：
……

data:{
  form:{
    root1:Number,
    root2:{
      child1:[],
      child2:{},
      child3:String
    },
    root3:[],
    root4:{
      child4:string,
      child5:[]
    }
  }
}

……
总之就是贼复杂，因为它绑定了iview表单里面的数据，所以不大可能把它扁平化，现在我需要在每次打开这个组件的时候对这个form进行赋值，于是我通过传props的方法把form表单从外面传进来：

props:{
  outForm:{
    type:Object,
    default: function () {
      return {}
    }
  }
  ……
}

同时添加watch：

watch:{
  outForm(val){
    this.form = val
  }
}

但是就会存在一个问题，之后我想关闭这个modal就失效了？（这个组件是个modal，我在watch里面绑定了value来监听modal开关，但是现在虽然props监听到value变化，然而赋值到data却没有反应，this.$forceUpdate()也不起效）

于是我考虑到了用$set来设置对象，但是对于这种多层json有什么比较好的方法去设置呢？因为父组件ParentEle也有一个form来对应里面ChildEle的props项outForm，那么如果也要用$set逐项设置的话，它每设置一项就会触发到一次watch，那更新视图不就很频繁且很耗时？

Answer 1

watch 加个参数， deep: true