Vue seems to be reusing child component when only one at a time is showing

Question

I am rendering child components in a v-for loop, but only showing one at a time. I assumed that Vue will create a seperate/new child component for each render.

But

Answer 1

Try to use v-show instead of v-if: v-show= "question.id === currentVisibleIndex"(triple equals is better).

v-if will render only when that condition is met, v-show will render all the Answer components but will only show the one with currentVisibleIndex.

You can move the this.selectedOption = null(selectedOption, actually) inside the data, that meaning that will be initialized with null. Another option is to use as prop and set the default return as null as well.