Javascript VueJS被动日期对象

这是一个相当初级的问题，但我在任何地方都找不到答案

我有两个按钮，可以将给定的日期对象增加/减少+/-1天。对象已更新，但不会显示更改。我发现这是因为日期Obj没有反应，但我没有找到解决方案或解决办法

HTML:

---

在控制台中，日期会增加/减少，但页面上呈现的日期保持不变。有人能帮忙吗？谢谢。

您正在修改

日期

对象，如果Vue无法检测到更改，请创建一个新的日期对象：

---

哦，太简单了。非常感谢，工作起来很有魅力，你帮我省了几个小时的试错时间

<div id="app">
  <button @click="inc">+ 1 day</button>
  <button @click="dec">- 1 day</button>
  <br /><br />

  {{date}}
</div>

new Vue({
  el: "#app",
  data: {
    date: new Date()
  },
  methods: {
    inc () {
        this.date.setDate(this.date.getDate() + 1)
        console.log(this.date)
    },
    dec () {
        this.date.setDate(this.date.getDate() - 1)
        console.log(this.date)
    }
  }
})

new Vue({
  el: "#app",
  data: {
    date: new Date()
  },
  methods: {
    inc () {
      this.date.setDate(this.date.getDate() + 1)
      this.date = new Date(this.date)     //  create a new date and assign to this.date
        },
    dec () {
      this.date.setDate(this.date.getDate() - 1)
      this.date = new Date(this.date)
    }
  }
})