How to bind an element to the mouse so that the width changes?

Question

Vue.js

I implemented almost such an example jsfiddle.net/epcybL4v/2614/, only the moment is like this, in my example https://jsfiddle.net/eywraw8t/490910/ you can’t move the mouse so actively, it flies out of the visibility area and it’s impossible to change the width already. You can only slowly move the mouse, which is not very convenient and is most likely implemented somehow differently.
The second point that I noticed is when, let’s say, you narrow the distance, but then you want to expand, you need to release the mouse and do the same movement again.
I haven’t yet figured out how to bind the element to the mouse in order to avoid all these nuances

Answer 1

You have to listen to mousemove on the entire document, and you're only listening on the element. So it turns out that the mouse leaves the element (it's small), and mousemove is no longer called. Here is an example, I hung mousemove on the table
But it's still not the same (but reflects the essence). You need to hang mousemove on the entire document in the mounted hook, as in your example. It is also desirable to hang up the removal of the listener on beforeDestroy.