Vue的computed可以修改自身的值吗

项目中有一个输入框的值content需要同时依赖四个变量data1, data2, data3， data4, 同时还要实现双向绑定。

 <textarea rows="4" v-model="content" placeholder="描述"/>

一开始我把content的赋值写在方法中，但是随着逻辑的增加，四个变量改变时都要为content赋值，代码就变得很重复。

于是我试着把content写在computed中，发现在输入框中输入框中修改值时，界面上可以变化，但是用vue dev tools可以看到，this.content的值并没有发生变化。Vue官方文档指出，计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。

但是computed中的值我们可以给它一个setter属性。本以为设置setter就可以直接改变原变量了，结果并没有改变，官方文档给出的setter也都是改变其他变量的值。

最后想了一个变通的方法，我在data中声明了另一个content1，当输入框发生变化时，会触发计算属性的setter，从而改变content1的值。

完整代码如下：

 <textarea rows="4" v-model="content" placeholder="描述"/>


 data() {
    return {
      data1: '',
      data2: '',
      data3: '',
      data4: '',
      content1: ''
    }
  },
  
  computed: {
    content: {
      get: function() {
          let val = `${this.data1}${this.data2}${this.data3}${this.data4}`
          this.content1 = val
          return val
      },
      set: function(v) {
        this.content1 = v
        return v
      }
    }
  },