vue中v-model失效原因以及解决方案

<template>
  <div>
    <input v-model="name" />
    <button @click="updateName">Update Name</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: 'John',
    }
  },
  methods: {
    updateName() {
      setTimeout(() => {
        this.name = 'Jane' // 异步更新 name 值
      }, 1000)
    },
  },
}
</script>

updateName() {
  // 使用 Promise
  setTimeout(() => {
    this.name = 'Jane' // 异步更新 name 值
  }, 1000).then(() => {
    this.$nextTick(() => {
      console.log(this.$el.querySelector('input').value) // 输出 'Jane'
    })
  })
  // 使用 async/await
  setTimeout(async () => {
    this.name = 'Jane' // 异步更新 name 值
    await this.$nextTick()
    console.log(this.$el.querySelector('input').value) // 输出 'Jane'
  }, 1000)
},

<template>
  <div>
    <div v-for="(item, index) in list" :key="index">
      <input v-model="item.name" />
    </div>
    <button @click="addNewItem">Add New Item</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        { name: 'John' },
        { name: 'Jane' },
      ],
    }
  },
  methods: {
    addNewItem() {
      const newItem = { name: 'New Item' }
      this.list.push(newItem) // 修改 list 数组，但是没有使用 Vue.set 或 this.$set 方法
      // this.$set(this.list, this.list.length, newItem) // 使用 this.$set 方法更新数组，使其能够被 Vue 监测到
    },
  },
}
</script>

this.$set(this.list, this.list.length, newItem)