v-stepper-vertical recreates components while transitioning between steps

Question

I am migrating my project from Vue 2 to Vue 3. I refactored my v-stepper and now I am using v-stepper-vertical. I just realized that it recreates the component when I transition between steps. Like I have a componentA to show in step 1. When I go to step 2 and get back to step 1 it recreates componentA again and again. Is there a way to avoid this?

Here is an example template I am using v-stepper-vertical

<template>
  <v-stepper-vertical v-model="step">
    <template v-slot:default>
      <v-stepper-vertical-item
        :complete="step > 1"
        subtitle="Personal details"
        title="Step one"
        value="1"
      >
        <CompA></CompA>

        <template v-slot:next="{ next }">
          <v-btn color="primary" @click="next"></v-btn>
        </template>

        <template v-slot:prev></template>
      </v-stepper-vertical-item>

      <v-stepper-vertical-item
        subtitle="Confirmation"
        title="Step three"
        value="2"
        @click:next="onClickFinish"
      >
        Step 2 content

        <template v-slot:next="{ next }">
          <v-btn color="primary" text="Finish" @click="next"></v-btn>
        </template>

        <template v-slot:prev="{ prev }">
          <v-btn v-if="!finished" variant="plain" @click="prev"></v-btn>

          <v-btn
            v-else
            text="Reset"
            variant="plain"
            @click="finished = false"
          ></v-btn>
        </template>
      </v-stepper-vertical-item>
    </template>
  </v-stepper-vertical>
</template>

And here is the component

<template>
  <span>Hello World</span>
</template>

<script>
  export default {
    name: 'CompA',
    created() {
      console.log('created')
    },
  }
</script>

When I transition between tabs I see created logs counting on console.

Answer 1

v-stepper-vertical uses v-expansion-panel internally and allows to pass eager prop to underlying instances in order for them to not be unmounted when inactive:

<v-stepper-vertical eager v-model="step">