동적 컴포넌트와 keep-alive는 어떻게 동작하나요?

<script setup>
import { ref, shallowRef } from "vue";
import TabHome from "./TabHome.vue";
import TabProfile from "./TabProfile.vue";

const tabs = { home: TabHome, profile: TabProfile };
const current = shallowRef(TabHome); // 어떤 컴포넌트를 표시할지
</script>

<template>
  <button @click="current = tabs.home">Home</button>
  <button @click="current = tabs.profile">Profile</button>

  <component :is="current" />   <!-- `current`가 담고 있는 컴포넌트를 렌더링 -->
</template>