多个html使用同一个数据,vue 自定义组件被同一个页面多次调用，数据被覆盖

我自己写了一个组件，echarts里面的柱状图，数据与图表名字是动态的，

在column.vue中写了

props:{

column:{

text:{

type:String,

default:""

},

series: [Object],

},

},

mounted(){

//省略一部分代码

this.myChart.setOption({

series:this.column.series

})

}

之后在charts.vue中调用

import vColumn from '../common/Column.vue';

export default {

data() {

return {

column:{

text:"这个是标题",

series: [

{

name: '标题1',

type: 'bar',

barWidth: '60%',

data: [10, 52, 200, 334, 390, 330, 220]

}

],

},

column2:{

text:"这个是标题2",

series: [

{

name: '标题2',

type: 'bar',

barWidth: '60%',

data: [10, 100,20,40,50,120]

}

],

}

}

},

mounted() {},

methods: {},

components: {

vColumn

}

}

但是显示出来的图表只有第一个是有数据的，而且数据是colum2的，请问如果同一个页面调用多次相同组件，但是数据不同，该怎么做呀，或者说怎么样局部调用，避免同页面中数据污染

这是使用第一个v-column

这是使用第二个v-column