title: Hide popup box when clicked anywhere on the document
body: <p>I am trying to make a component with a list of items and when I click on each of the items, it shows me an edit popup. When I click on it again, it hides the edit popup. But I would like to also be able to click anywhere on the document and hide all edit popups (by setting edit_item_visible = false).</p>
  
  <p>I tried v-on-clickaway but since I have a list of items then it would trigger multiple times. And the @click event would trigger first and then the clickaway event would trigger multiple times and hide it right after showing it. I also tried to change the component's data from outside but with no luck.</p>
  
  <pre><code>Vue.component('item-list', {
      template: `
          &lt;div&gt;
              &lt;div v-for="(item, index) in items" @click="showEdit(index)"&gt;
                  &lt;div&gt;{{ item.id }}&lt;/div&gt;
                  &lt;div&gt;{{ item.description }}&lt;/div&gt;
  
                  &lt;div v-if="edit_item_visible" class="edit-item"&gt;
                      Edit this item here...
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      `,
  
      data()
      {
          return {
              items: [],
              edit_item_visible: false,
              selected: null,
          };
      },
  
      methods:
      {
          showEdit(index)
          {
              this.selected = index;
              this.edit_item_visible = !this.edit_item_visible;
          }
      },
  });
  
  const App = new Vue ({
      el: '#app',
  })
  </code></pre>