how to hide element when click outside vuejs

1//work fine in vue.js 2
2/*
3<div id="menu" @click="show" v-click-outside="hide" v-bind:class="{active: isActive}">
4  <div>
5    click outside me
6  </div>
7</div>
8*/
9
10Vue.directive('click-outside', {
11  bind: function (el, binding, vnode) {
12    this.event = function (event) {
13      if (!(el == event.target || el.contains(event.target))) {
14        vnode.context[binding.expression](event);
15      }
16    };
17    document.body.addEventListener('click', this.event)
18  },
19  unbind: function (el) {
20    document.body.removeEventListener('click', this.event)
21  },
22});
23
24new Vue({
25	el: "#menu",
26  data: {
27  	isActive: true
28  },
29  methods: {
30  	show: function() {
31    	this.isActive = true;
32    },
33    hide: function() {
34    	this.isActive = false;
35    }
36  }
37});
38