Изменить состояние компонента из другого компонента, отображаемого в v-for

У меня есть список компонентов, отображаемых в v-for. Я хочу установить логическое свойство "show" как false в других компонентах, когда для одного из них установлено значение true: Для упрощения я добавляю только два компонента

Код основного компонента:

<template>
    <aside class = "main-sidebar">
        <section class = "sidebar">
            <ul class = "sidebar-menu" data-widget = "tree">
                <nav-bar-user-profile-item></nav-bar-user-profile-item>
                <nav-bar-item></nav-bar-item>
                <nav-bar-item></nav-bar-item>
            </ul>
        </section>
    </aside>
</template>

<script>
import NavBarUserProfileItem from '@/components/NavBar/NavBarUserProfileItem';
import NavBarItem from '@/components/NavBar/NavBarItem';

export default {
    name: 'NavBar',
    components: {
        NavBarUserProfileItem,
        NavBarItem
    },
    methods: {
        MenuHasBeenToggled(event) {
            console.info(event);
        }
    }
}

NavBarItemComponent

<template>
    <li class = "treeview2 item" :class = "{'menu-open': isOpen, 'active': menu.active}" @click = "ToggleState">
        <a href = "#">
            <i class = "fa fa-th"></i>
            <span>{{ menu.title }}</span>
            <span class = "pull-right-container">
                <i class = "fa fa-angle-right pull-right"></i>
            </span>
        </a>
        <collapse-transition>
            <ul class = "treeview-menu" v-show = "isOpen">
                <li v-for = "submenu in menu.submenus" :key = "submenu.title" :class = "{'active': (('active' in submenu) ? submenu.active : false)}">
                    <b-link :href = "submenu.link">
                        <i class = "fa fa-circle-thin"></i>
                        {{ submenu.title }}
                    </b-link>
                </li>
            </ul>
        </collapse-transition>
    </li>
</template>

<script>

    export default {
        name: 'NavBarItem',
        data: function () {
            return {
                isOpen: false
            }
        },
        computed: {

        },
        methods: {
            ToggleState() {
                this.isOpen = !this.isOpen;
                this.$emit("toggle-state");
            }
        },
        props: {
            menu: {
                type: Object,
                default: function() {
                    return {
                        link: "#",
                        title: "Main menu",
                        active: true,
                        submenus: [
                            {
                                link: "#",
                                title: "Submenu 1",
                            },
                            {
                                link: "#",
                                title: "Submenu 2",
                                active: true
                            },
                            {
                                link: "#",
                                title: "Submenu 3",
                            },
                        ]
                    }
                }
            }
        }
    }
</script>

<style scoped>

</style>

Цель состоит в том, чтобы щелкнуть один из и показать содержимое меню, в то же время свернуть другие компоненты.

Я подумал об использовании массива переменных и привязке его к реквизиту «show», прослушивании события и установке для каждой переменной значения false, кроме той, которая формирует компонент, отправивший событие.

Как я могу узнать, какой компонент отправил событие?

Любая лучшая идея о том, как выполнить эту задачу?