[Vuejs]-Change component state form another component rendered in a v-for

I think, the best way to do it is to add a uniuque identifier property to each NavBarItem and a property for a selected NavBarItem. Then in the main component you can on click on NavBarItem set selected NavBarItem and in NavBarItem make the isOpen computed on the basis if current NavBarItem identifier equals the clicked NavBarItem. Something like this:

<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 item-id="1" :selected-item-id="selectedNavbarItemId" @click="selectedNavBarItemId = 1"></nav-bar-item>
                <nav-bar-item item-id="2" :selected-item-id="selectedNavbarItemId" @click="selectedNavBarItemId = 2"></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
    },
    data: function(){
        return {
             selectedNavBarItemId: 0
        }
    },
    methods: {
        MenuHasBeenToggled(event) {
            console.log(event);
        }
    }
}

And in NavBarItem

<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 {

            }
        },
        computed: {
           isOpen:function(){
               return itemId == selectedItemId;
           }
        },
        methods: {

        },
        props: {
            itemId:Number,
            selectedItemId:Number,
            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>