[Vuejs]-Two-way binding with input value transform

I may be wrong, but this is my understanding of what’s going on:

With the @input/value pair, if you change the value to be what the value was already, reactivity won’t trigger, and so won’t change the value in the input.

With v-model, the value will be changed to the new value, (including the space). This will trigger reactivity. Then the watcher will change it back. And when the DOM finally updates, it will set the value of the input.

Using this.val = e.target.value; this.val = this.val.replace(/\s/g, ""); works because you’ve triggered the reactivity with the first statement.

However, when you use @input, nothing yet has changed the val, and when you set it to remove spaces from the input’s target.value, you’re setting it to what val was already, and reactivity won’t trigger.

It’s also worth noting that v-model is only real syntactic sugar when used on a component. When used on a native input, it’s not exactly the same. See this issue for example.