vue cannot modify array through subscript

First of all, the official definition cannot be modified:

Vue cannot detect changes to the following arrays:

• When you set an array item directly using the index, for example: vm.items[indexOfItem] = newValue
• When you modify the length of the array, for example: vm.items.length = newLength

 1. Directly replace the entire subscript

<ul>

      <li v-for="(item, index) in timeWait" :key="index">

        <span>系统正在运行，请稍等...  {
   
   { !isNaN(item.value)?('当前结果是：'+item.value):'' }}</span>

      </li>

</ul>

created() {
    this.timeWait.push({id:'001',value:90})
},
 methods: {
    handelOk(type, data) {
      this.timeWait[0] = {id:'002',value:80}
}

Result: The modification failed and the page remains unchanged.

2. Add attributes through subscripts

created() {
    this.timeWait.push({id:'001'})
},
 methods: {
    handelOk(type, data) {
      this.timeWait[0].value = 80;
}

Result: The modification failed and the page remains unchanged.

3. Modify objects through subscripts

created() {
    this.timeWait.push({id:'001',value:80})
},
 methods: {
    handelOk(type, data) {
      this.timeWait[0].value = 900;
}

Result: The modification is successful and the page changes. This is also why many experts say that subscripts can change the array into a responsive type.

Supplement: Adding through the two methods cannot be modified, but if you push a data into it immediately after modification, you will magically find that the page can be displayed.

created() {
    this.timeWait.push({id:'001'})
},
 methods: {
    handelOk(type, data) {
      this.timeWait[0].value = 80;
      this.timeWait.push('')
}