关于同一页面多次渲染相同组件时出现的数据干扰问题

问题遇到的现象和发生背景

html页面引入vue2的静态资源。需要完成通过选择框或者点击按钮的形式在页面上生成表格组件。
现在创建组件后，页面同时存在两个相同的组件时，会出现修改一个表格的值，另外一个表格也会同步改变。应该怎么做可以让数据互不干扰。并且可以实现从后端拿到数据后渲染页面。
下面是我创建的组件，和组件的一些方法，

用代码块功能插入代码，请勿粘贴截图

const tab = {
template: '#tab',
props: ['tableLine','lineRemark','lineStatus','lineTime','num'],
methods:{
addTable(index){
this.$emit('add-table',index)
},
delData(index){
this.$emit('del-data',index)
},
addLengthArr(index,item){
this.$emit('add-length-arr',index,item)
},
delArr(e,i){
this.$emit('del-arr',e,i)
}
}
}

const tabList=new(Vue.extend(tab))({propsData:{tableLine: this.tableLine,lineTime:this.lineTime,lineRemark:this.lineRemark,num:this.num,lineStatus:this.lineStatus}}).$mount()
tabList.$on('add-table',(e)=>{
this.disabled=false
let obj={
weight:"",
lengthArr:[{
s:"",
lengths:""
}]
}
this.tableLine[0].param.splice(e+1,0,obj)
this.lineX=this.flatten(this.tableLine[0].param)
const lengthB=this.lineX.map(item=>{
return item.lengthArr.length
})
this.num=this.sum(lengthB)
})
document.getElementById('tabBox').appendChild(tabList.$el)

一个页面同时弹2个框？
并且这2个弹框用的是同一个组件?

定义不同变量参数