VueJs: don't change reactive variables on the fly?

Question

JavaScript

Hey guys! Help me understand why when I assign a new value to a variable, this value is not immediately applied? Here is the sandbox App.vue file, lines where I change variables 118 (this.transformer.defaultAspectRatio = false) and 126 (this.transformer.defaultAspectRatio = true).
The point is that when the left or right button is pressed, the scale does not go proportionally otherwise proportionally.
But it works for me every other time, when I press the button for the first time, then the resize goes wrong, because the variable does not change, and when I press the same button a second time, then it works.
I changed the variables in the handler on top of "onDragPressure", that is, before the scale goes on and it still doesn't work right away.
PS: I apparently screwed up somewhere, because it used to work like this, but I apparently just don’t understand why this happens and therefore I can’t find an error.

Answer 1

Most likely your error is described here:
Details about reactivity