Vue 中 watch 不会触发的情况

Question

父组件：

 <div class="table-item" v-for="(item, index) in MonitorHost" :key='index'>
  <hostTable :host='item'></hostTable>
   </div>

子组件：

  props: {
        host: {
            type: String
        }
    },

  watch: {
        async host(val) {
            console.log(val);
            let res = await this.findTask({...this.Form, host: val});
            if (res && res.rltCode === 200) {
                this.Form.Total = res.data.totalCount;
                this.tableData = res.data.data;
            }
        }
    },

发现watch根本就没有触发，如果不循环的话，就可以触发，这是什么原因

Answer 1

 host: {
    async handler(val) {
      // ...
    },
    immediate: true
  }

Answer 2

在初始化的时候 watch 不会被触发，默认是第二次值改变的时候触发，需要第一次触发添加属性：

immediate: true

Answer 3

  watch: {
        host:{
            handler: function (val) {
                console.log(val);
            },
        deep: true
       }
  },