Stepper in parent component (.vue file) not importing child component

[joegaber]

have a multi-part-form using Stepper and StepPanel. All of the , <script>, and <style> code are in one .vue file. It works perfect. I decided to modularize the code by taking each part of the form and put that code into a separate '.vue' file and import it into the parent. I have tried every idea on the internet that I can find, I've asked Grok, CoPilot, and the AI built into WebStorm and after 3 days of trying all suggestions, I'm stumped. here is a snippet of code showing the imported component both in and out of a StepPanel. The ProfileFormTemplate gets rendered when it is outside of the StepPanel, but does not render inside the StepPanel.

Parent component

  <div class="main-container">
    <div class="main-content">
      <div class="multi-part-form">
        <Stepper v-model="activeStep" class="basis-[50rem]">
          <!-- Child components outside of StepPanel renders perfectly -->
          <ProfileFormTemplate
              :form="profileForm"
              :options="{employmentStatus: employmentStatusOptions}"
              @activateCallback="handleActivateCallback"
          />
          
          <!-- Child components inside a StepPanel does not render -->
          <StepPanel :value="0" v-slot="{ activateCallback }">
            <ProfileFormTemplate
                :form="profileForm"
                :options="{employmentStatus: employmentStatusOptions}"
                @activateCallback="handleActivateCallback"
            />
          </StepPanel>

ProfileFormTemlate:

  <div class="part-form">
    <h2>Profile</h2>
    <InputText v-model="form.firstName" class="input-text" placeholder="First Name"/>
    <InputText v-model="form.lastName" class="input-text" placeholder="Last Name"/>
...

[joegaber]

Fixed. Issue was with the way activeStep wasn't being set correctly and so StepPanel didn't know which imported component to set the style="dislay: none" or style="display: block". AI in WebStorm finally found the fix.