vue中的watch如何观测一个自己添加的属性？

Question

  data() {
    return {
        selectCompanyList:[]
    }
  },

初次在data中定义的selectCompanyList是空数组。
然后通过操作。selectCompanyList的结构会修改成此下结构。

[ { "listStyle": true, "industryName": "航空", "missionCompany": [ { "companyName": "厦门航空有限公司", "missionEntityId": 162551, "itemStyle": true }, { "companyName": "春秋航空股份有限公司", "missionEntityId": 162549, "itemStyle": true }, { "companyName": "上海均瑶（集团）有限公司", "missionEntityId": 162553, "itemStyle": true } ] } ]

请问如果观测selectCompanyList数组第一项中的missionCompany的变化？

我是这么写的，没生效。

watch:{
     'selectCompanyList[0].missionCompany':function(v,n){
         console.log(v,n,"变化了?"); 
     },
 }
 
 或者
 watch:{
    selectCompanyList: {
    handler(v, n) {
        console.log(n,v,'还是没有修改');
    },
    deep: true
  }
  或者
  watch:{
     'selectCompanyList[0]missionCompany':function (val, oldVal) { 
         console.log(val, oldVal,"还是没有修改");
         
    }
 }

我使用了以上三种写法都没有生效。请问改如何解决？

Answer 1

selectCompanyList 使用$SET 设置值，这样内部的属性才能是响应话的

Answer 2

        //添加公司
        addCompany(index){
            if (this.hasMissionEntityIds.length) {
                if (this.checkedPeoples.userList[index].missionEntityIds) {
                    this.checkedPeoples.userList[index].missionEntityIds = this.checkedPeoples.userList[index].missionEntityIds.concat(this.hasMissionEntityIds) ;
                }else{
                    this.$set(this.checkedPeoples.userList[index],'missionEntityIds',this.hasMissionEntityIds)
                    // this.checkedPeoples.userList[index].missionEntityIds = this.hasMissionEntityIds ;
                    
                }
                EventBus.$emit("removeCompany",{hasMissionEntityIds:this.hasMissionEntityIds});
                this.$forceUpdate()
            }
         this.has =true
        }

Answer 3

selectCompanyList.0.missionCompany这样子写。另外直接观察list应该是没问题的。是不是哪里写错了。看看控制台是否报错