How to select elements on which you hover over with the mouse pressed at the time of the click?

Question

Vue.js

There is a list of elements.
Task: when you clicked on one element of the list and moved to any other element, these elements and the range between them should be highlighted. At the same time, if you do not release the click and move the mouse back, then the selection should be removed.

Now it works somewhat (try it in the code-sendbox), but the first element is not added. If I try to add it (uncomment the commented out code), then the selection ends after the second element, before releasing the mouse. And I can't understand why.

Link to the sandbox: https://codesandbox.io/s/heuristic-wescoff-blyb9?f...

1. Why doesn't the code that is commented out work?
2. How can I fix it so that it works correctly?

Answer 1

https://codesandbox.io/s/for-https-qna-habr-com-q-...