Rendering Multiple components using dynamic components

[Aritra8438]

Hi, all!

I have been working on a project that uses Vue3 and I encountered the following difficulty.
Here is the Vue3 documentation for the relevant part.

Suppose we have the following template:

<template>
  <button @click='activeTab="tabA"'>Counter</button>
  <button @click='activeTab="tabB"'>Input</button>

  <div v-if='activeTab === "tabA"'>
    <tabA :counter_val='counter'/>
  </div>
  <div v-if='activeTab === "tabB"'>
    <tabB input='Holla'/>
  </div>
</template>

We can do the following instead (rather to keep the dynamic components alive):

<keep-alive>
  <component :is="activeTab" v-bind='currentProps'/>
</keep-alive>

---

Now let's take a similar situation:

<template>
  <button @click='activeTab="tabA"'>Counter + Timer</button>
  <button @click='activeTab="tabB"'>Input</button>

  <div v-if='activeTab === "tabA"'>
    <tabA :counter_val='counter'/>
	<tabc :timer_val='timer'/>
  </div>
  <div v-if='activeTab === "tabB"'>
    <tabB input='Holla'/>
  </div>
</template>

i.e. I just want to render multiple components when a single condition is true (i.e. to use keep-alive with component). How can I do that?

One obvious way might be to create a component for counter and timer and import it to render a single component, apart from that any handy solution to this?