How to correctly change the state of sibling components?

Question

Vue.js

What is considered the best practice in such a situation: there are sibling components (outputting, say, table rows through v-for). When you click on one of the components, you need to, say, activate it, and deactivate the rest of the components.
So far, I see 2 options:
1. Put a watcher on some property and listen for its change in all components
2. Call the method of child components from the parent via this.$refs, which will change the state
Maybe there is something else? All this looks rather crutch, despite the fact that such a task is quite common.

Answer 1

The state is stored in the parent and passed through the parameters to the child components. Events are emitted from the child components, according to which the state is updated in the parent.
UPD. For example .