Vue3 Tree Menu Show

this is what i want to do with vue js, If Menu 1 or Menu 2 is clicked among the items with submenu, its ul will be opened, and if Menu 1 is open, Menu 2 is clicked. Close Menu 1. I couldn't do this, I would be happy if you help me. What I want to do is if one of the submenu is open, the 2nd submenu remains closed. Codesandbox

<template>
 <div class="navigation">
      <div class="container max-w-7xl mx-auto">
        <ul class="flex justify-end navbar-nav">
          <li v-for="(menu, index) in menuItem" :key="index">
            <a href="menu.href" @click.stop="showMenu()">{{ menu.title }}</a>
            <ul v-if="menu.children" :style="{ display: active ? 'block' : 'none' }" @click.stop>
              <li  v-for="(child, childIndex) in menu.children" :key="childIndex">
                <a href="child.href">{{ child.title }}</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
</template>
<script>
export default {
  name: "Home",
  data() {
    return {
      active: false,
      menuItem: [
        {
          title: "Home",
          href: "/home",
        },
        {
          title: "About",
          href: "/about",
        },
        {
          title: "Menu 1",
          href: "#",
          children: [
            {
              title: "Menu 1.1",
              href: "/menu/1/1",
            },
            {
              title: "Menu 1.2",
              href: "/menu/1/2",
            },
            {
              title: "Menu 1.3",
              href: "/menu/1/3",
            },
          ],
        },
        {
          title: "Menu 2",
          href: "#",
          children: [
            {
              title: "Menu 2.1",
              href: "/menu/2/1",
            },
            {
              title: "Menu 2.2",
              href: "/menu/2/2",
            },
            {
              title: "Menu 2.3",
              href: "/menu/2/3",
            },
          ],
        },
        {
          title: "Gallery",
          href: "/gallery",
        },
        {
          title: "Contact",
          href: "/contact",
        },
      ],
    };
  },
  methods: {
    showMenu() {
      this.active = !this.active;
    },
    close() {
      this.active = false;
    },
  },
  mounted() {
    document.addEventListener("click", this.close);
  },
  unmounted() {
    document.removeEventListener("click", this.close);
  },
};
</script>