vue2问题：textarea 标签内使用响应式数据响应式失效

问题复现：

<template>
  <div>
    <div style="margin-bottom: 10px;">
      <button @click="onClick1">改变值1</button>
      <button @click="onClick2">改变值2</button>
    </div>
    <textarea>{{ text }}</textarea>
    <div>text值：{{ text }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: "这是一个text值"
    };
  },
  methods: {
    onClick1() {
      this.text = "改变值1";
    },
    onClick2() {
      this.text = "改变值2";
    }
  },
};
</script>

<style scoped>
button {
  margin-right: 5px;
}
</style>

我猜测，因为textarea是原生标签，当在输入框修改值时，原生行为自行替换了模板中的text变量，导致textarea模板中的text值响应式失效，如果是通过 v-modle 来绑定值 <textarea v-model="strValue"></textarea> ，值的替换应该是由vue应用来操作的，所以响应式不会有问题。有知道的朋友也可以在评论区留言，非常感谢！