Hide the dropdown is-hoverable after a click event

gistfile1.txt

<template>
    <div class="dropdown is-hoverable" ref="dropdown">
      <div class="dropdown-trigger" style="cursor:pointer">
          <span v-html="getName()">Dropdown button</span>
          <span class="icon is-small">
            <i class="fas fa-angle-down" aria-hidden="true"></i>
          </span>
      </div>
      <div class="dropdown-menu" id="dropdown-menu" role="menu">
        <div class="dropdown-content">
          <a
            @click="go('/')"
            class="dropdown-item"
          >
            Overview
          </a>
          <hr class="navbar-divider">
          <a
            v-for="p in pages"
            :key="p.name"
            class="dropdown-item"
            @click="go(p.path)"
          >
          {{ p.name }}
          </a>
          <hr class="navbar-divider">
          <a 
            class="dropdown-item"
          >
            + more
          </a>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      pages: [
        { name: 'Programs', path: '/programs' },
        { name: 'Orders', path: '/programs' },
        { name: 'Items', path: '/items' },
      ]
    }
  },
  methods: {
    getName() {
      return this.$route.name 
    },
    go(path) {
      this.$router.push(path);
      this.hideHover()
    },
    hideHover() {
      let e = this.$refs.dropdown
      e.className = "dropdown";
      setTimeout(function () {
        e.className = "dropdown is-hoverable";
      }, 100);
    }
  }
}
</script>