title: Is there a way to close a vue component by clicking outside of it?
body: <p>I am looking for a way to close a component when there it a click outisde of the element.</p>
  
  <p>I tried an <code>addEventListener</code>.
  This closes the component but after being closed it will not open again.</p>
  
  <pre><code>window.addEventListener('click', function(e){
  
  if (document.getElementById('shopcartpreview').contains(e.target)){
  console.log("Clicked in Box");
  
  
  } else{
  console.log("Clicked outside Box");
  $('#shopcartpreview').hide();
   }
   })
  </code></pre>
  
  <p>Is there a way to accomplish this?</p>
  
  <pre><code>&lt;template&gt;
      &lt;div id="shopcartpreview"  v-if="carthover"&gt;
          &lt;div class="cartitem" v-for="item in cartitems"&gt;
              &lt;div class="cartitempic"&gt;&lt;img class="productImg" width="80px" height="80px" v-bind:src="'assets/products/' + item.image"&gt;&lt;/div&gt;
              &lt;div class="cartitemdetails"&gt;
                  &lt;div class="cartitemname"&gt;{{item.name}}&lt;/div&gt;
                  &lt;div class="cartitemqty"&gt;1 X &lt;/div&gt;
                  &lt;div class="cartitemprice"&gt;€{{item.unit_price}}&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="cartitemdelete"&gt;
                  &lt;img src="assets/images/icon-bin.png" width="15px" height="15px"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="carttotal"&gt;
              &lt;div class="carttotaltext"&gt;TOTAL:&lt;/div&gt;
              &lt;div class="carttotalprice"&gt;€2,860.00&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="cartcheckouttbn"&gt;PROCEED TO CHECKOUT&lt;/div&gt;
          &lt;div class="viewcart"&gt;VIEW CART&lt;/div&gt;
  
  
  
      &lt;/div&gt;    
  &lt;/template&gt;
  &lt;script&gt;
      module.exports = {
          data: function () {
                  return{ 
                      cartitems: 0,
                      carthover: false,
                  }
              },
              created(){
              EventBus.$on('addToCart', (payload) =&gt;{
                  this.cartitems = payload
              }),
              EventBus.$on('mouseover', (carthover) =&gt;{
              this.carthover = carthover
              })
          }
      }
  &lt;/script&gt;
  </code></pre>