在v模型上重置textarea不会重置textarea中的文本

Question

我想在用户单击撤消按钮时重设textarea中的文本。

输入的数据属性heading和文本区域的body确实在重置，但是我只看到标题输入被重置，正文的文本区域确实删除了文本。

<form @submit.prevent="handleSubmit">
  <input  v-model="heading" placeholder="Heading" />
  <textarea  v-model="body" placeholder="Note..." />
  <button type="submit" ><i class="material-icons">send</i></button>
  <button type="button" @click="resetNote" ><i class="material-icons">undo</i></button>
</form>

export default {
  data() {
    return {
      heading: '',
      body: ''
    }
  },
  methods: {
    resetNote() {
      console.log('resetNote')
      this.heading = '';
      this.body = '';
    },
    handleSubmit() {
      console.log('handleSubmit')
      console.log(`${this.heading} - ${this.body}`)
    }
  }
};