How in vuejs, when an event in an isolated component, extinguish a property in sibling components at the same level?

Question

Vue.js

Good afternoon,
There is one parent component, which contains child components child .*
parent
child
child
child
...
child
Each child has a field and when you click on this field, a tooltip description opens. If you click all fields, then all tooltips will open. I want to somehow make it so that when you click on one field, all that are located in the sibling elements are cached.

<template>
    <div>
        <div @click="handleEvent($event)" @mouseleave="turnOffCommix">
            <slot></slot>
        </div>

        <div class="change-help"
             :class="{'change-help__no-bg': !showIcon}"
             :style="helpStyle"
             @click="handleEvent($event)"
        >
            <template v-if="showIcon">?</template>
            <div class="change-hint" :style="hintStyle">
                <p class="change-hint__text">
                    {{ msg }}
                </p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        showIcon: {
            default: true,
            type: Boolean
        },
        msg: {
            default: 'empty',
            type: String
        }
    },
    data () {
        return {
            showHelp: false
        };
    },
    methods: {
        handleEvent (event) {
            this.turnOnCommix();
        },
        turnOnCommix: function(){
            this.showHelp = true;
        },
        turnOffCommix: function(){
            this.showHelp = false;
        }
    },
    computed: {
        hintStyle: function () {
            return {opacity: this.showHelp ? 1 : 0};
        },
        helpStyle: function () {
            return {
                overflow: this.showHelp ? 'visible' : 'transparent'
            };
        }
    }
};
</script>

I thought in the direction of events ( ). But they seem to be correctly passed up to the parents, and the children are already reactively regenerating the view. And besides, how to understand in this case that for the current node, where the tooltip has surfaced, it cannot be extinguished before clicking on another field. this.$emit('turn-off')

Answer 1

use ref