The variable in the data property is updated only on the third click, I don’t understand why?

Question

Vue.js

I have a widget. Operation logic: when you select the radio button in the block, the next block appears.

I need to make sure that when changing the radio button in the block, all other blocks (except for the one following the given one) are hidden. Everything works, except for one thing: the blocks are hidden only after the second change in the radio button. I can't understand why it works like this.

When I click on the radio, I track the title change, while the queustionIndex variable changes and the next block is loaded. But when the checkbox is changed, this variable is not updated the first time. I brought it to the console, in the first block. Thanks for the help.

Code:
https://jsfiddle.net/IvanGrishov/fsc3ea4j/13

Answer 1

this.quiz.questions[i].checkedName = ''
At this moment, the watch event fires and the next handler is queued.
You can move it to the end of the function, but it's better to check the new value and do nothing if it's empty.this.questionIndex = 1