This is Vue 2.7. Im my project I have a simple form with question and several answers, and the user can load a new question with a button or come back to the previous question. The answers are radio inputs. So when the user loads a previously answered question, the corresponding radio input should be “checked”.

I created an object which keeps track on the answered questions, and Vue updates this.selectedAnswer variable every time a new Question is loaded or answered, and this variable is connected to the radio inputs with v-bind. V-bind is supposed to work both ways and update the radios when the variable changes, right?

The variables 100% work, but the forms work weird. Sometimes when you come back to the answered question it marks the selected answer as checked and sometimes it doesn’t (even if the corresponding variable is fine). It’s just completely random. Feels like maybe the asynchronous nature of the loadQuestion() method breaks it sometimes because the $api is asynchronous, but I have no idea how to fix it.

Here’s the radio input:

<div class="trainer__answers">
    <div class="trainer__single-answer" v-for="answer in currentQuestionData.answers">
        <div v-if="currentQuestionData">
            <input
                type="radio"
                :id="answer.id"
                :name="currentQuestionData.id"
                :value="answer.id"
                v-model="selectedAnswer"
                @click="chooseAnswer(currentQuestionData.id, answer.id)"
            />
        </div>

        <label :for="answer.id">{{ answer.content }}</label>
    </div>  
</div>

Here’s the other stuff:

    data() {
        return {
            currentQuestion: 1,
            currentQuestionData: {},
            questionTracker: {},
            selectedAnswer: "",
            correctAnswer: "",
        };
    },
    methods: {
         loadQuestion(questionId) {
            this.$api.trainerQuestions.questionDetail(questionId)
                .then((res) => {
                    this.currentQuestionData = res.data;
                    this.currentQuestion = questionId;
                    this.correctAnswer = this.currentQuestionData.answers.find(answer=>answer.is_right == 1).id;
                })
                .catch(err => {
                    console.log(err)
                });
        },
    chooseAnswer(question_id, answer_id) {
        this.$set(
            this.questionTracker,
            question_id,
            {
            'answer_id': answer_id,
            'right_answer_id': this.correctAnswer,
            }
        )
    },
},

watch: {
    currentQuestion(newValue) {
        if (this.questionTracker[newValue]) {
            this.selectedAnswer = this.questionTracker[newValue].answer_id;
        } else {
            this.selectedAnswer = '';
        }
    },
}