How can I get a mouseup event when the mouse goes up outside of the element with vue?

Question

I can easily capture the mousedown event on the element by adding a @mousedown. If the cursor goes up inside of the element, adding @mouseup will capture the event.

However, if the mouse goes up outside of the element (include outside of the browser window), the mouseup event is not generated.

How can I obtain this event?

new Vue({
  el: '#app',
  
  data: {
    boxvalues: [true, false],
  },
  
  methods: {
    mousedown() {
      console.log( "mousedown" );
    },
    
    mouseup() {
      console.log( "mouseup" );
    }
    

  },
})

.thediv {
  width: 200px;
  height: 200px;
  background-color: red;
  margin: 8px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  
  <div class="thediv" @mousedown="mousedown" @mouseup="mouseup">
  </div>
    
</div>

Answer 1

The highest level to track mouse events is on window object.

window.addEventListener('mouseup', function(e) {…}, false);

Mouse events outside browser window can't be tracked due to security reasons. However you might want to use Pointer Lock API to prevent accidental mouse move outside of browser window: https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API