Click outside of a div or children to be able to trigger an action (close of the div itself)

component.vue

<template>
  <li
    v-if="isLoggedIn"
    class="user-menu__item relative btn"
    @click="showAccountEvent"
    v-click-outside="closeAccountEvent"
  >
    <user-dropdown v-if="showAccount" />
  </li>
</template>

<script>
export default {
  methods: {
    showAccountEvent() {
      this.showAccount = true
    },

    closeAccountEvent() {
      this.showAccount = false
    }
  }
}
</script>

directive.js

import Vue from 'vue'

// Detect the click outside the element or it's children.

Vue.directive('click-outside', {
  bind: function(el, binding, vnode) {
    el.clickOutsideEvent = function(event) {
      if (!(el == event.target || el.contains(event.target))) {
        vnode.context[binding.expression](event)
      }
    }
    document.body.addEventListener('click', el.clickOutsideEvent)
  },

  unbind: function(el) {
    document.body.removeEventListener('click', el.clickOutsideEvent)
  }
})