title: How can i hide my drop-down menu if the user click outside
body: <p>I'm working on a small project using VueJS, I'm making an autocompletion, i would like to hide my dropdown list if the user click outside,</p>
  <p>this is my code :</p>
  <pre><code>&lt;template&gt;
      &lt;div class=&quot;autocomplete&quot;&gt;
          &lt;input autocomplete=&quot;off&quot; type=&quot;text&quot; class=&quot;form-control form-control-border&quot;  v-bind:placeholder=&quot;this.placeholder&quot; v-model=&quot;query&quot; @keyup=&quot;autoComplete&quot; @focus=&quot;suggestion = true&quot; /&gt;
          &lt;div v-if=&quot;data.length &gt;= 1 &amp;&amp; suggestion&quot;&gt;
              &lt;ul class=&quot;dropdown-menu&quot; aria-labelledby=&quot;dropdownMenuButton1&quot;&gt;
                  &lt;li @click=&quot;selected(item[label], item.id)&quot; v-for=&quot;item in data&quot; :key=&quot;item.id&quot;&gt;
                      &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;{{ item[label] }}&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  import {getAPI} from &quot;../axios-api&quot;
  
  export default {
      props: {
          label: String,
          path: String,
          placeholder: String,
          action: String,
      },
      data() {
          return {
              suggestion: false,
              query: '',
              data: [],
          }
      },
      methods: {
          autoComplete(){
              if(/\S/.test(this.query) &amp;&amp; this.query.length &gt;= 3){
                  getAPI.get(this.action + '?query=' + this.query).then((response) =&gt; {
                      this.data = response.data
                  })
              }
          },
          selected(label, id){
              this.suggestion = false
              this.query = label
          }
      }
  }
  &lt;/script&gt;
  </code></pre>
  <p>How can i detect outside click, so i can switch the value of <code>suggestion</code> to <code>false</code> again</p>