How to temporarily store information about which radio button is selected without using vuex?

Question

Vue.js

I'm trying to make a multi-step form. Question types are separated into separate components and connected in the main MainForm.vue. Now, when moving forward / backward between questions, the selected values ​​are not saved. How can I make the selected answer active when moving between questions?

MainForm.vue

<RadioQuestion key="question1" v-if="step === 1" :answers="qRadio1" />
 <RadioQuestion key="question2" v-if="step === 2" :answers="qRadio2" />

RadioQuestion.vue

<template>
  <div class="row question-step no-image-radio">
    <!-- Start Answer -->
    <div class="col-12" v-for="(answer, idx) in answers" :key="answer.name">
      <label class="question-label" :for="'step'+answer.questionNum+'_' + idx">
        <div class="custom-control custom-radio custom-control-inline">
          <input
            type="radio"
            :id="'step'+answer.questionNum+'_' + idx"
            :name="'step_'+answer.questionNum"
            class="custom-control-input"
            v-model="singleAnswer"
            :value="answer.name"
          />
          <label class="custom-control-label" :for="'step'+answer.questionNum+'_' + idx"></label>
        </div>
        <div class="answer">{{ answer.name }}</div>
      </label>
    </div>
    <!-- End Answer -->
  </div>
</template>

Answer 1

Store the selected answers in the parent component, pass them to the questions as parameters, send it to the parent when you select an answer.