vue3 修改数组已有的数据DOM不更新

在 Vue 3 中，当你修改数组中已有的数据时，Vue 不会自动检测到这个变化并更新 DOM。这是因为 Vue 3 使用了 Proxy 来进行数据劫持，而 Proxy 只能捕获到已经存在的属性的操作，无法捕获到数组索引的变化。

为了解决这个问题，你可以使用 Vue 提供的 `$set` 方法来手动触发更新。`$set` 方法的用法是 `Vue.set(target, propertyName/index, value)`，其中 `target` 是要修改的数组，`propertyName/index` 是要修改的属性名或索引，`value` 是新的值。

例如，假设你有一个数组 `myArray`，你想修改索引为 `0` 的元素，你可以这样做：

Vue.set(myArray, 0, newValue);

这样 Vue 就会检测到数组的变化并更新相应的 DOM。

另外，你也可以使用数组的变异方法（例如 `push`、`pop`、`splice` 等）来修改数组，Vue 会自动检测到这些变化并更新 DOM。但是如果你直接修改数组的某个索引值，Vue 不会自动更新 DOM，你需要使用 `$set` 方法来手动触发更新。