Close menu after changing route: VueJs3 + Tailwind (vue-router)

Question

I am trying to createa nice navigation menu that's responsive and can be toggled in mobile.

When in mobile, I want the hamb menu to be opend on click and then close when I'm changig page.

But when I click on any of the menu-items, vue-router successfully takes me to the correct page (ie: from home to about) but does not close itself. THANKS IN ADVANCE!!

<template>
  <div class="fixed w-full z-10 top-0">
    <div class="dc-custom-bg">
      <nav class= "px-6 py-4 mx-auto md:flex md:justify-between md:items-center">
        <div class="flex items-center justify-between">
          <router-link to="/" class="text-xl font-bold text-pink-800 md:text-2xl hover:text-pine">
            <img src="assets/images/logo.png" alt="my logo">
          </router-link>
          <!-- Mobile menu button -->
          <div @click="showMenu = !showMenu" class="flex md:hidden">
            <button type="button" class="text-pink-800 hover:text-pink-400 focus:outline-none focus:text-pink-400">
              <svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
                <path
                  fill-rule="evenodd"
                  d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"
                ></path>
              </svg>
            </button>
          </div>
        </div>


        <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
        <ul :class="showMenu ? 'flex' : 'hidden'" class=" flex-col mt-8 space-y-4 md:flex md:space-y-0 md:flex-row md:items-center md:space-x-10 md:mt-0">
          <li class="text-sm font-bold text-cherry hover:text-pine"><router-link to="/">Home</router-link></li>
          <li class="text-sm font-bold text-cherry hover:text-pine"><router-link to="/about">About</router-link></li>
          <li class="text-sm font-bold text-cherry hover:text-pine"><router-link to="/career">Career & Edu</router-link></li>
          <li class="text-sm font-bold text-cherry hover:text-pine"><router-link to="/contacts">Contact Me</router-link></li>
          <li class="text-sm font-bold text-cherry hover:text-pine"> <a href="">Download CV</a></li>
        </ul>
      </nav>
    </div>
  </div>
</template>

I tried a few solutions online but none worked for me, this is the best I could and fine already on here. In mobile it gets correctly toggled if I press the hamb menu, but when I want to change page and I press on the link, the page changes but the menu remains open.

  name: 'Navbar',
  data() {
      return {
        showMenu: false,
      };
    },
    methods: {
      toggleNav: function () {
        this.showMenu = !this.showMenu;
        console.log("click")
      },
    },
}
</script>

Answer 1

Just add a watcher over the router to close the menu whenever the current route changes:

watch: {
  '$route.path'() {
    this.showMenu = false
  }
}