Javascript 当在装入中添加的新变量发生更改时，视图不会更新

我在utils中有一个列表，我几乎在任何地方都使用它，它在每个对象中只有

文本
变量

在我的一个组件中，我需要向该列表中的每个项目添加
done
变量，以便切换它们。我可以看到添加了变量，但每当我切换它时，视图都不会得到更新


const arrayFromUtils=[{
文本：“学习JavaScript”
},
{
文本：“学习Vue”
},
{
文本：“在JSFIDLE中玩”
},
{
文字：“打造令人敬畏的东西”
}
];
新Vue({
el:“应用程序”，
数据：{
待办事项：arrayFromUtils
},
安装的（）{
this.todos.forEach（item=>（item.done=false））；
},
方法：{
切换：功能（todo）{
todo.done=！todo.done
log（'toggled item:'，todo）；
}
}
})
.red{
颜色：红色；
}

{{todo.text}}
您正在为每个todos项目添加属性。要使其具有反应性，您需要使用
this.$set
。请看一下有关的文档

安装的
功能应为：

mounted（）{
this.todos.forEach（item=>this.set（item，“done”，false））；
}
嘿，这是Vue反应性的问题

若要更改数组中的项，则需要使用vm.$set或映射整个数组

如果您以自己的方式执行此操作，vue无法检测到是否有可能在vue3中发生更改：）

mounted() {
  this.todos.map(item => ({...item, done: false});
}