Multistep form preventing first page of clearing the inputs

Question

I got a multistep form and I wonder how can I after filling the inputs at the first form-page prevent it from clearing when I'm toggling to see the first form-page from the second one. Now the input text disappears. Or should I somehow use the localStorage?

https://codesandbox.io/s/intelligent-jasper-teh1im?file=/src/components/Step1.vue:0-1188

<template >
  <div class="container">
    <div class="content-wrapper">
      <h1>Step 1</h1>
      <div class="form-group">
        <label>First Name</label
        ><input
          name="name"
          v-model="firstName"
          placeholder="Your first name"
          class="form-control"
          required
        />
      </div>
      <div class="form-group">
        <label>Last Name</label
        ><input
          name="lastname"
          v-model="lastName"
          placeholder="Your last name"
          class="form-control"
          required
        />
      </div>
      <!-- @click.prevent="goToStep(2)" -->
      <button type="button" @click.prevent="nextStep" class="btn">Next step</button>
    </div>
    <Button />
  </div>
</template>

<script>
import Button from "./Button.vue";
export default {
  components: {
    Button,
  },
  methods: {
    nextStep() {
      this.$emit("next");
    },
  },
};
</script>

Answer 1

Just use the <KeepAlive> component so that dynamic components are not unmounted.

<template>
  <KeepAlive>
    <component :is="currentStep" />
  </KeepAlive>
</template>