Vue.js 计算属性不为'；t在更改数据变量时更新

我有一个名为

monRaw

的数据变量，它是一个

时刻

对象，表示当前星期的第一天：

...
data() {
  return {
    monRaw: moment().startOf('isoWeek')
  }
},
...

然后，我有一个名为

weekTitle

的计算属性，该属性与一些文本一起显示（它比我的项目中的要多，但我在这里简化了它）：

最后，名为

viewNextWeek（）

的方法将我的数据变量更改为下一周的第一天：

...
methods: {
  viewNextWeek: function() {
    this.monRaw = this.monRaw.add(1, 'weeks');
  },
...

在我的模板中，我显示我的计算属性以及触发我的方法的按钮：

{{ weekTitle }}
<button @click="viewNextWeek">Next Week</button>

{{weekTitle}
下个星期

但由于某些原因，当我更改计算属性所基于的数据变量时，它不会得到更新

它甚至不尝试：我的

alert（）

仅在页面加载时触发，之后单击按钮时不再触发

---

这里出了什么问题？

矩。add

会对矩变量进行变异，因此您只需将同一对象重新分配给自身，而不会导致任何更改

Per:

如果要创建副本并对其进行操作，应使用 瞬间#在操纵瞬间之前克隆

newvue({
el:“#应用程序”，
数据：{
monRaw:moment（）.startOf（'isoWeek'）
},
计算：{
weekTitle:function（）{
警报（'正在更新计算属性…'）；
返回“从${this.monRaw.format（'DD'）}开始的当前周”；
}
},
方法：{
viewNextWeek:函数（）{
const newValue=this.monRaw.clone（）.add（1，'weeks'）；
this.monRaw=newValue；
}
}
});

{{weekTitle}}
下个星期
我理解，但不完全理解！表达式
this.monRaw.add（1，'weeks'）
更改this.monRay的值，对吗？然后我将这个新值赋给this.monRaw，我现在理解它是无用的（正如您所说，它是将一个对象赋给它自己）。但是：
this.monRaw
应该接收新值，而不是旧值，不是吗？它不会更改
this.monRaw
的值。它的值与前面的对象相同（由其在内存中的地址标识）。它的内容会发生变化，但反应性并不能检测到这样的内容变化。
{{ weekTitle }}
<button @click="viewNextWeek">Next Week</button>