title: Hiding a dropdown in Vuejs by clicking outside (component)
body: <p>I'm creating a menu component on a Vuejs project. This menu has 2 dropdowns, I already created some methods and used Vue directives so when I click in 1 of them, the other hides and vice versa, I'd also like to know how to hide them by clicking outside.</p>
  
  <p>I've tried 2 Vue libs but didn't work for me. Also, I'd like to do this manually if possible and not externally.</p>
  
  <p>HTML:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!-- menu --&gt;
  &lt;div&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/li&gt;
      &lt;li v-on:click="toggle1(), dropAreas =! dropAreas"&gt;
        &lt;span&gt;Areas&lt;/span&gt;
      &lt;/li&gt;
      &lt;li v-on:click="toggle2(), dropAdmin =! dropAdmin"&gt;
        &lt;span&gt;Administration&lt;/span&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;!-- /menu --&gt;
  &lt;!-- dropdowns--&gt;
  &lt;div v-if="dropAreas"&gt;
    &lt;ul&gt;
      &lt;li&gt;
        &lt;span&gt;Kitchen&lt;/span&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;span&gt;Baths&lt;/span&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div v-if="dropAdmin"&gt;
    &lt;ul&gt;
      &lt;li&gt;
        &lt;span&gt;Profile&lt;/span&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;span&gt;Services&lt;/span&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;!-- /dropdowns--&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>data () {
      return {
        dropAreas: false,
        dropAdmin: false
      }
    },
    methods: {
      toggle1 () {
        if (this.dropAdmin === true) {
          this.dropAdmin = false
        }
      },
      toggle2 () {
        if (this.dropAreas === true) {
          this.dropAreas = false
        }
      }
    }
  </code></pre>
  
  <p>*This code is being called in another component, "Home", like this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div&gt;
      &lt;menu&gt;&lt;/menu&gt;
      &lt;!-- [...] --&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>Any ideas on how to do it manually? Is it possible? Thank you.</p>