vue-drag-resize | Vue2 & & Vue3 Component for resize and drag elements | Widget library

Turns out that since you never update your field to the new location when it fails, you are just setting the same value as it previously had. (You start moving from left: 100, top: 100. then because you only update fieldson "drag stop", you then tell fields to be updated with the coordinates you got onActivated(still 100, 100).)

Vue will not register any changes if the value is === the old value. This results in your rectangle not moving back to start, yet again because Vue doesn't think anything is new.

There are multiple ways to solve this.

Solution 1: You can, for example, add a decimal to your new value;

v-if will do your job

Updated You can use v-for as discussion: