Stepper: Nested Components are re-mounted

[rickngo]

Describe the bug

When using the Stepper component and its associated components (StepPanels, etc.), nested components are being re-mounted when navigating steps.

Possibly, each StepPanel is being re-mounted even for non-nested components, but since the ref variable is located in the parent component, then it appears like it is not being re-mounted.

Reproducer

https://stackblitz.com/edit/primevue-4-vite-issue-template-nxw9yy?file=src%2FApp.vue

PrimeVue version

4.0.0

Vue version

3.x

Language

TypeScript

Build / Runtime

Vue CLI App

Browser(s)

Chrome, Safari

Steps to reproduce the behavior

See StackBlitz.

Essentially, create a component and then nest it in the StepPanel. When navigating steps, the component is being re-mounted/re-rendered.

Expected behavior

Ideally, StepPanels should only show/hide the nested components as otherwise, all form information could possibly be lost.

[rickngo]

After looking at StepPanel.vue, I think this stems from the use of v-if rather than v-show in the <template v-else> block:

 <template v-else>
        <template v-if="!asChild">
            <component v-if="active" :is="as" :id="id" :class="cx('root')" role="tabpanel" :aria-controls="ariaControls" v-bind="getPTOptions('root')">

should be:

 <template v-else>
        <template v-if="!asChild">
            <component v-show="active" :is="as" :id="id" :class="cx('root')" role="tabpanel" :aria-controls="ariaControls" v-bind="getPTOptions('root')">

I tested using a Vertical Stepper (which does have v-show) and everything works as expected