How do you use two identical components in a page in Vue and keep the components in the same state?

I use two identical vue components in a Vue page to control the state of the component through the values in the data, and I want the state of both components to remain Synchronize. The problem is that now the data data will report an error if it is not written in a function, but if it is written in a function, the two components will not be able to maintain Synchronize. Find a solution

Aug.22,2021

data modification takes place in the parent component (the child component notifies the parent component to modify the data through emit ejection events, and the parent component v-on listens for events to modify the data), and then binds Synchronize to the two components through props.


vuex, data is put in store


parent
    child(:a="a")//childachildabemit on
    child(:a="a")
Menu