Vue.js - How to track global click event
<p>js and produced this code of the popover, when clicking on the <code>navbar-link</code> element, <code>popover</code> will be shown or hidden. What would be nice is to close <code>popover</code> when I click anywhere on the screen (if popover is open). </p>

<p>Any ideas to accomplish that? </p>

<pre><code>&lt;template&gt;
  &lt;div&gt;
    &lt;span class="navbar-link" v-on:click="toggle()"&gt;
      &lt;i class="ion-android-notifications-none"&gt;&lt;/i&gt;
    &lt;/span&gt;
    &lt;div class="popover" v-bind:class="{ 'open': opened }"&gt;
      Hello, world!
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
  export default{
    data(){
      return {
        opened: false
      }
    },
    methods: {
      toggle: function () {
        this.opened = !this.opened;
      }
    }
  }
&lt;/script&gt;
</code></pre>

<p>Thank you in advance :)</p>