How to use the WIZARD component in vue3 correctly

Question

I am using the wizard component, which is a step by step, I am placing a select in each tab, but I have the problem that only the select of the first tab is shown, how could I solve this problem?

component:https://bahadirsofuoglu.github.io/form-wizard-vue3/guide/installation.html

I attach my code:

 <template>
  <div id="app">
    <div>
      <h1>Customize with Props</h1>
      <Wizard
        squared-tabs
        card-background
        navigable-tabs
        scrollable-tabs
        :nextButton="{
          text: 'test',
          icon: 'check',
          hideIcon: true, // default false but selected for sample
          hideText: false, // default false but selected for sample
        }"
        :custom-tabs="[
          {
            title: 'Step 1',
          },
          {
            title: 'Step 2',
          },
        ]"
        :beforeChange="onTabBeforeChange"
        @change="onChangeCurrentTab"
        @complete:wizard="wizardCompleted"
      >
        <template v-if="currentTabIndex === 0">
          <h5>Tab 0</h5>
          <v-select
            :items="options"
            label="Select an option"
            v-model="selectedOption"
          ></v-select>
        </template>
        <template v-if="currentTabIndex === 1">
          <h5>Tab 1</h5>
          <v-select
            :items="options"
            label="Select an option"
            v-model="selectedOption"
          ></v-select>
        </template>
      </Wizard>
    </div>
  </div>
</template>
<script>
import "form-wizard-vue3/dist/form-wizard-vue3.css";
import Wizard from "form-wizard-vue3";

export default {
  name: "App",
  components: {
    Wizard,
  },
  data() {
    return {
      currentTabIndex: 0,
      options: ["Option 1", "Option 2", "Option 3"],
      selectedOption: "",
    };
  },
  methods: {
    onChangeCurrentTab(index, oldIndex) {
      console.log(index, oldIndex);
      this.currentTabIndex = index;
    },
    onTabBeforeChange() {
      if (this.currentTabIndex === 0) {
        console.log("First Tab");
      }
      console.log("All Tabs");
    },
    wizardCompleted() {
      console.log("Wizard Completed");
    },
  },
};
</script>

attached image:

tab 1: tab2:

Answer 1

From quick look at the documentation it seems that you need all of the steps content to be wrapped with <template #activeStep>. And then inside your v-if logic probably.