JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<div id="menu" @click="show" v-click-outside="hide" v-bind:class="{active: isActive}">
  <div>
    click outside me
  </div>
</div>

SCSS

body, html {
  height: 100%  
}

#menu {
  div {
    padding: 1em;
  }
  cursor: pointer;
  position: fixed;
  left: -180px;
  top: 0;
  bottom: 0;
  width: 200px;
  background-color: white;
  &.active {
    left: 0px;
  }
  transition: all 0.3s;
}

JavaScript

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

new Vue({
	el: "#menu",
  data: {
  	isActive: true
  },
  methods: {
  	show: function() {
    	this.isActive = true;
    },
    hide: function() {
    	this.isActive = false;
    }
  }
});