Переход на в-за компоненты

Question

Я пытаюсь найти способ vuejs выполнить переход между компонентами, который проверит следующие требования:

• Я хотел бы, чтобы все мои компоненты всегда присутствовали в DOM (поэтому, используя v-show)
• Я хотел бы использовать v-for для СУХОЙ цели
• Я хотел бы иметь контроль над режимом перехода

Я перепробовал множество конфигураций, но ни одна из них не соответствовала моим потребностям.

---

Вот несколько настроек, к которым я пришел:

Этот не работает с v-show (нужна группа переходов) и не использует v-for

<transition name="slide" mode="in-out">
    <Foo v-if="store.current == 'Foo' " key="Foo" ></Foo>
    <Bar v-if="store.current == 'Bar' " key="Bar" ></Bar>
    <FooBar v-if="store.current == 'FooBar' " key="'FooBar" ></FooBar>
</transition>

Этот не позволяет mode и не использует v-for

<transition-group name="slide">
    <Foo v-show="store.current == 'Foo' " key="Foo" ></Foo>
    <Bar v-show="store.current == 'Bar' " key="Bar" ></Bar>
    <FooBar v-show="store.current == 'FooBar' " key="'FooBar" ></FooBar>
</transition-group>

Этот также не позволяет mode (потому что это переходная группа)

<transition-group name="slide">
    <component v-for="item in list" v-show="store.current == item" :is="item" :key="item"></component>
</transition-group>