Как я могу закрыть раскрывающееся меню, когда я открываю другое в Vuejs 3 (без плагинов)

У меня есть два раскрывающихся меню в компоненте, и я хочу закрыть одно, когда другое открыто. Я новичок в Vuejs, поэтому я не хочу использовать какой-либо плагин, я хочу создать его с нуля, может ли кто-нибудь помочь мне с этим? вот мой реальный код

<template>
<ul class = "menu">
    <li v-for = "menu in menus" :key = "menu.id">
        <button class = "button is-white" @click = "toggle">
            {{menu.name}}
            <ion-icon name = "chevron-down-outline"></ion-icon>
        </button>
        <div class = "dropdown" v-show = "open">
            <router-link to = "/" v-for = "item in menu.subMenu">
                <div class = "options">
                    {{item}}
                </div>
            </router-link>
        </div>
    </li>
</ul>

data() {
    return {
        open: false,
        menus: [
            {
                id: 1,
                name: 'My Profile',
                subMenu: ['Dashboard', 'My Profile', 'Logout']
            },
            {
                id: 2,
                name: ' My Orders',
                subMenu: ['Order']
            }
        ],
        
    }
},
created() {
    window.addEventListener("click", this.close);
},
beforeDestroy() {
    window.removeEventListener("click", this.close);
},
methods: {
    toggle() {
        this.open = !this.open
    },
    close(e) {
        if (!this.$el.contains(e.target)) {
        this.open = false;
        }
    }
}