title: Using target.event how to close the dropdown when clicked outside in Vuejs?
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const app = new Vue({
    el: "#app",
    name: 'aselect',
    data: {
      value: 'Select a Fruit',
      list: ["Orange", "Apple", "Kiwi", "Lemon", "Pineapple"],
      visible: false
    },
    methods: {
      toggle() {
        this.visible = !this.visible;
      },
      select(option) {
        this.value = option;
      }
    }
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="app"&gt;
    &lt;h1&gt;Custom Select Dropdown&lt;/h1&gt;
  
    &lt;div class="aselect" :data-value="value" :data-list="list"&gt;
      &lt;div class="selector" @click="toggle()"&gt;
        &lt;div class="label"&gt;
          &lt;span&gt;{{ value }}&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class="arrow" :class="{ expanded : visible }"&gt;&lt;/div&gt;
        &lt;div :class="{ hidden : !visible, visible }"&gt;
          &lt;ul&gt;
            &lt;li :class="{ current : item === value }" v-for="item in list" @click="select(item)"&gt;{{ item }}&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I am using the reference from <a href="https://www.npmjs.com/package/vue-click-outside" rel="nofollow noreferrer">https://www.npmjs.com/package/vue-click-outside</a></p>
  <p>This is my codepen link <a href="https://codepen.io/santoshch/pen/gOmvvmN" rel="nofollow noreferrer">https://codepen.io/santoshch/pen/gOmvvmN</a> In the codepen link, i have a dropdown, where after toggling down the dropdown i am unable to close the dropdown list.</p>
  <p>So i have searched for some reference i vuejs, And finally found npm package called vue-click-outside, Itried to place event but not sure how to proceed.</p>