VueJS反应式日期对象

Question

而是一个初学者的问题，但是我在任何地方都找不到解决方案。

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

https://jsfiddle.net/zacrdwfy/

HTML：

<div id="app">

  <button @click="inc">+ 1 day</button>

  <button @click="dec">- 1 day</button>

  <br /><br />

  {{date}}

</div>

JS / Vue：

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)

    }

  }

})

在控制台中，日期可以增加/减少，但页面上显示的日期保持不变。有人可以帮忙吗？谢谢。