Vue中表单添加修改功能踩的坑

最近第一次用到Vue来写表单，当点击表单行进行修改操作，弹出修改框，因为用的v-model来绑定，发现把值清空后原页面也跟着改变了，虽然是个小问题，还是思考了很久，想到双向绑定后数据指向为同一地址了，之后使用了深克隆总算解决了，记录一下

<tr id="test1" v-for="item in infoGroup" @click='updateInfo(item)'>
    <td>{{item.aa}}</td>
</tr>

var test1=new Vue({
    el:'#test1',
    data:{
        infoGroup:''
    },
    methods:{
        updateInfo:function(item){
                //深克隆
                let o=JSON.parse(JSON.stringify(item));
                test2.info=item;
        }
    }
})

<div id="test2">
    <input v-model='infos.aa'>
</div>

var test2=new Vue({
    el:'#test2',
    data：{
        info:''
    }
})