Vue一个页面中多次调用同一个组件A，A中调用了组件B，修改B中的某一个数据后，如何实现页面中每一个组件A中的相同值一起被修改

Vue一个页面中多次调用同一个组件A，A中调用了组件B，修改B中的某一个数据后，如何实现页面中每一个组件A中的相同值一起被修改

页面结构大概这个样子

需要修改B中tag的值，修改后实现页面中每个tag的值同时改变

page中调用A组件的代码：

<page>
            <componet ref="Chart1" chart-index="1" />
            <componet ref="Chart2" chart-index="2" />
            <componet ref="Chart3" chart-index="3" />
            <componet ref="Chart4" chart-index="4" />
            <componet ref="Chart5" chart-index="5" />
</page>

A组件中调用B组件的代码：

<div class="para-struct">
            <para :chart-index="this.para1" :tag="tag1" />
            <para :chart-index="this.para2" :tag="tag2" />
            <para :chart-index="this.para3" :tag="tag3" />
</div>

现在是设计了一个弹窗选择tag的值，但是现在点击之后修改的只有当前点击的那一项，不能实现同时修改，要如何能实现同时修改三个组件的tag值呢

像这种数据调用复杂的适合采用Vuex解决。