Как закрыть раскрывающийся список при нажатии в любом месте в vue js

Question

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

Это код, который я сделал.

<template>
    <nav class="sidebar-nav">
        <ul class="nav">
            <li class="nav-item" @click="activeLink">
                <router-link class="nav-link" :class="{active: isActive}" :to="{name: 'Article'}">
                    <i class="nav-icon fa fa-upload"></i> Article
                </router-link>
            </li>
            <li class="nav-item nav-dropdown" disabled>
                <div class="nav-link nav-dropdown-toggle" @click="HandleClick"><i class="nav-icon icon-credit-card"></i> Transaction</div>
                <ul class="nav-dropdown-items">
                    <li class="nav-item" @click="activeLink">
                        <router-link class="nav-link" :class="{active: isActive}" :to="{name: 'Buy'}">
                            <i class="nav-icon icon-list"></i> Buy
                        </router-link>
                    </li>
                </ul>
            </li>
            <li class="nav-item nav-dropdown" disabled>
                <div class="nav-link nav-dropdown-toggle" @click="HandleClick"><i class="nav-icon fa fa-shopping-cart"></i> Users</div>
                <ul class="nav-dropdown-items">
                  <li class="nav-item" @click="activeLink">
                    <router-link class="nav-link" :class="{active: isActive}" :to="{name: 'All'}">
                      <i class="nav-icon icon-list"></i> All
                    </router-link>
                  </li>
                  <li class="nav-item" @click="activeLink">
                    <router-link class="nav-link" :class="{active: isActive}" :to="{name: 'Roles'}">
                      <i class="nav-icon icon-list"></i> Roles
                    </router-link>
                  </li>
                  <li class="nav-item" @click="activeLink">
                    <router-link class="nav-link" :class="{active: isActive}" :to="{name: 'Permissions'}">
                      <i class="nav-icon icon-list"></i> Permissions
                    </router-link>
                  </li>
                </ul>
            </li>
        </ul>
    </nav>
</template>

И это мой js.

<script>
import { mixin as clickaway } from 'vue-clickaway'
import { hideMobile } from '@coreui/vue/src/mixins/hideMobile'
import { togglePs } from '@coreui/vue/src/mixins/togglePs'
export default {
  name: 'DefaultContainer',
  mixins: [ clickaway, hideMobile , togglePs],
  data () {
    return {
      isActive: false
    }
  },
  computed: {
    name () {
      return this.$route.name
    },
    list () {
      return this.$route.matched.filter((route) => route.name || route.meta.label )
    },
    psSettings: () => {
      // ToDo: find better rtl fix
      return {
        maxScrollbarLength: 200,
        minScrollbarLength: 40,
        suppressScrollX: getComputedStyle(document.querySelector('html')).direction !== 'rtl',
        wheelPropagation: false,
        interceptRailY: styles => ({ ...styles, height: 0 })
      }
    },
  },
  methods: {
    scrollHandle (evt) {
      // console.log(evt)
    },
    HandleClick(e) {
      e.preventDefault()
      e.target.parentElement.classList.toggle('open')
    },
    activeLink(event) {
      event.preventDefault()
      event.target.parentElement.classList.toggle('router-link-exact-active open')
    },
  },
}
</script>

И функция, чтобы открыть мой раскрывающийся список в HandleClick (e) {} function

Должен ли я различать каждый HandleClick в каждом раскрывающемся списке, чтобы при я щелкаю в любом месте, раскрывающееся раскрывающееся окно будет закрыто?

Или есть способ получше?

Спасибо.