title: Hiding an element after clicking outside in vue 2
body: <p>I'm trying to hide a sidebar after clicking outside using Vue 2 and laravel. This sidebar was created inside a navbar component. At first, I added a <code>@click="showSidenav = !showSidenav"</code> just to open it and initialize data to <code>showSidenav: false</code>. And also added a close anchor tag to hide the sidebar. Working fine actually but when the thing comes in my mind that how about hiding it also when clicking outside the sidebar? I created a method <code>showSidenav</code> and perform the opening of the element and tried to use <code>nextTick</code> but it executes same time as when I call the method. For now I use jquery inside the method to change again the data but when I click again the hamburger menu it won't change the data.</p>
  
  <p><a href="https://jsfiddle.net/rbocfhq9/" rel="nofollow noreferrer">template structure</a></p>
  
  <pre><code>&lt;a href="#" v-on-clickaway="away" @click="openSidenav"&gt;Hamburger menu&lt;/a&gt;
  </code></pre>
  
  <p>Script</p>
  
  <pre><code> import { mixin as clickaway } from 'vue-clickaway';
      export default {
           mixins: [ clickaway ],
           data() {
               return {
                   showSidenav: false,
               }
           },
           methods: {
               openSidenav: function () {
                   this.showSidenav = true
               },
               away: function () {
                  this.showSidenav = false
               }
           }
      }
  </code></pre>
  
  <blockquote>
    <p>EDIT: Added <code>vue-clickaway</code> as suggested by @Nathan.</p>
  </blockquote>