VueJS: лучший способ переключения между двумя экземплярами одного и того же компонента

Допустим, у меня есть foo.vue, который я импортирую в родительский элемент как компоненты с именами a и b и отображаемые в соответствии с переменной show

Теперь от родителя, если я переключаюсь между компонентами a и b без установки show = null, я получаю всевозможные ошибки дочернего состояния.

Поэтому я установил show на null, прежде чем установить его для соответствующего компонента vue, например

this.show = null
this.show = a // or b

но это не работает. компонент заканчивается состоянием предыдущего. Это подтверждается даже для реквизитов, которые не обновляются.

Я заработал, используя timeout

toggle(show){
   this.show = null
   let that = this
   setTimeout(() => {
      that.show = show
   }, 200)
 }

Есть ли лучший способ? Для меня это не элегантно

Я понимаю, что то, что происходит внутри ребенка, не имеет значения, если родители говорят ему переключиться, он должен начать с чистого листа и перестроиться? Но в моем случае это не так. Есть ли что-то, что может вызвать мою проблему?

значение null каким-то образом принудительно обновляет ?

Мой дочерний компонент сложен из-за вызова ajax для получения списка, но ничего необычного.

родительский код

<template>
<div id="userAreaEventWrapper">
    <div class="userarea-submenu">
        <div v-on:click="toggle(comps.eventForm)" class='button-base-out'>
            <div :class="isSelected(comps.eventForm)">
                New Event
            </div>
        </div>
        <div v-on:click="toggle(comps.events)" class='button-base-out'>
            <div :class="isSelected(comps.events)">
                My Events
            </div>
        </div>
      <div v-on:click="toggle(comps.eventsAttending)" class='button-base-out'>
        <div :class="isSelected(comps.eventsAttending)">
          Attending
        </div>
      </div>
    </div>
    <EventForm v-if="show === comps.eventForm" @created="toggle(comps.events)" :mode="'create'"></EventForm>
    <Events ref="events" :mode="currentMode" v-if="show === comps.events" @noResults="toggle(comps.eventForm)" :attending="false"></Events>
    <AttendingEvents ref="attending" :mode="'home'" v-if="show === comps.eventsAttending" :attending="true"></AttendingEvents>
</div>
</template>

<script>
const EventForm = () => import( './event-form.vue')
const Events = () => import( './events.vue')
const AttendingEvents = () => import( './events.vue')

export default {
    name: "UserEventComponent",
    components:{
        EventForm,
        Events,
        AttendingEvents
    },
    data(){
        return{
            comps:{
              eventForm:1,
              events:2,
              eventsAttending:3
            },
            show: 2,
            currentMode:'user',
        }
    },
    methods: {
        toggle(show){
          this.show = null
          let that = this
          setTimeout(() => {
            that.show = show
          }, 200)
        },
        isSelected(n){
          return n === this.show ? 'button-base-in button-base-in-hover' : 'button-base-in'
        },

    },
}
 </script>

ребенок

выбрать API на mounted()

  mounted() {
    this.currentMode = this.mode
    if(this.resumeData && this.resumeData.slug){
       this.selectedSlug = this.resumeData.slug
    } else {
       this.resume(this.resumeData)
       this.getEvents()
    }
   }