Dynamic Component Loading and Caching with Vue 3 `keep-alive`

// ComponentA.vue
<template>
  <div>
    <h3>Component A</h3>
    <p>Current count: {{ count }}</p>
    <button @click="count++">Increment A</button>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
const count = ref(0);
onMounted(() => console.log('Component A Mounted!'));
</script>

// ComponentB.vue
<template>
  <div>
    <h3>Component B</h3>
    <p>Current text: {{ text }}</p>
    <input v-model="text" placeholder="Type something...">
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
const text = ref('');
onMounted(() => console.log('Component B Mounted!'));
</script>

// App.vue
<template>
  <div>
    <h1>Dynamic Components with Keep Alive</h1>
    <button @click="activeComponent = 'ComponentA'">Show Component A</button>
    <button @click="activeComponent = 'ComponentB'">Show Component B</button>

    <div class="component-wrapper">
      <keep-alive>
        <component :is="activeComponent"></component>
      </keep-alive>
    </div>
  </div>
</template>

<script setup>
import { ref, defineAsyncComponent } from 'vue';

// Import components directly or define them as async components
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

const activeComponent = ref('ComponentA');

const components = {
  ComponentA,
  ComponentB
};
</script>

<style scoped>
.component-wrapper {
  border: 1px solid #ccc;
  padding: 20px;
  margin-top: 20px;
  min-height: 100px;
}
button {
  margin-right: 10px;
}
</style>