'VueJs slot loose binding

I have made custom components for my project: ContentCard and SelectField. I use vuetify.

The problem is when I try to show/hide conditionally ContentCard. When I make this with v-show everything works fine and data and props was kept there binding. If I input some data to the fields and show or hide components data is still there.

But if I use if-else condition only the first field was kept his state/data. I doubt it is not related to the use of slots can be seen on line 315. I am still very rookie in VueJs but in the documentation, I did not see if I use one default slot then how many components can I put. In my case, I have two fields on one screen and three fields on the other instead of the default slot.

As I said above it work with v-show but the project has already been made and they want to stay with if-else.

Here is code sample CODE

  <v-form
    ref="form"
    v-model="formValid"
    class="content-card__form"
    lazy-validation
    :disabled="disabled"
    @submit.prevent="submitAction"
  >
    <div class="content-card__form-content">
      <slot />  //<FormEmailField
        <
        div
      >
        <Loading
          v-if="loading"
          class="loadin"
          :progress-size="80"
        />
        <div class="content-card__form-actions">
          <slot name="actions" />
        </div>
      </formemailfield>
    </div>
  </v-form>
  
  <slot name="footer" />
</v-card>

<ContentCard
    v-else-if="formState === formStates.SIGN_IN"
    ref="form"
    class="land__form land__form--sign-in"
    :title="$t('login.title')"
    :subtitle="$t('login.subtitle')"
  >
    <div class="field-title">
      {{ $t('global.email') }}
    </div>
    <SelectField
      slot
      v-model="username"
      default
      hide-details="auto"
      class="field-input-box"
      :label="$t('global.email')"
      :rules="[rules.required, rules.email]"
      @keyup.enter="tryToLogIn"
    />
    <div class="field-title">
      {{ $t('global.password') }}
    </div>
    <SelectField
      slot
      v-model="password"
      default
      hide-details="auto"
      class="field-input-box"
      :label="$t('global.password')"
      :rules="[rules.required]"
      @keyup.enter="tryToLogIn"
    />
  </ContentCard>


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source