计算属性如何生成编辑功能需要的临时变量

Question

假设created时请求getForm()，得到
form:{head:{},main:{},footer:{}}
页面有三个区域，分别需要form.head,form.main.form.footer数据
另外每个区域都提供了编辑功能，应该如何实现？

解决这个问题，实现上有二个注意点:
1，把数据分块，一般用到computed:{}
2, 编辑功能，一般需要一个临时变量

遇到的困难: computed默认只有get ，
手敲的伪代码如下:
data(){return { form:null}}
created(){this.getForm(() =>this.form = res .form)}
computed:{
head(){
return this.form.head
}
如果只用get的话，意味着这个数据只能用来展示。不符合要求！
启用set的话,如下:
computed:{
head:{

  get(){ return this.form.head}
  set(v){this.form.head = v}

}
}

乍看没有问题，继续……

接下来处理编辑功能，
点编辑时，需要把head放到一个临时对象tempHead里，相应地需要template也用tempHead变量来渲染，为什么呢，
第一点，分割数据才使用到computed的head，
第二点，因为我们的head是一个对象，而对象是可以用v-model直接修改内部属性的值，而我们需要在保存时才修改其值，所以需要临时变量，那么把临时变量定义在data还是computed？
答案是都可以！
我们知道，一个computed值想支持修改，那么必须定义set方法，v-model也会触发set ，所以可以set一个空函数，只在点保存时，把tempHead赋值给head，保存时的赋值操作不会触发set(这里好像是废话，哈哈哈)。另外使用computed，vue会帮我们执行get，也就是说点编辑时的赋值操作是多余的，

乍看没有问题，但我思维不够严谨，可能考虑不周，如有漏洞，希望同行指点。感谢

用户修改时，只修改临时对象，
点保存时，把临时变量的值赋值给head,赋值操作会触发computed中head的set方法，完成！！！

插一句，
我们的赋值操作由点击事件触发，适用于编辑页面跟列表页面不在同一屏显示，比如模态框，
假如不在同一屏，页面初始时就需要赋值，比如行内编辑，那么在getForm的回调里，tempHead=res.head就行，这里发散一下思维，如果获取的form是一个数组，对应到布局，就是table的行内编辑，只需要temp每一行，那么页面初始化时直接用res.list就行，比如有一个输入框绑定{{row.name}}点击编辑时，需要显示临时变量，这里怎么用临时变量替换row.name呢？？？

因为思维不够严谨，所以一个观点反复强调，希望不影响阅读?

Answer 1

确实有点混乱
编辑为何不能v-model
看上面是为了在有保存和取消功能

如果这样 有一种简单思路
获取到数据 赋值到data之前 深拷贝一份 （backdata）
点击保存 data -> backdata
点击取消 backdata -> data