In Vue 3, what can you bind to `<component :is>`, and what happens to a tab panel's local state when the tab switches?

## What `<component :is>` is `<component>` is a built-in **meta component** in Vue 3. It never appears in the DOM itself: it renders whatever type its `is` prop names, and renders a different type whenever that binding changes. It is the standard tool for a **tabbed settings page**, a wizard step, or any spot in a layout whose occupant is chosen from data. ## What `is` accepts | Value bound to `is` | What Vue renders | Typical use | |---|---|---| | An imported component object | That component | `<script setup>` code, where imports are used as variables | | A string naming a registered component | The component registered under that name | Options API code, globally registered components | | A string that is an HTML tag, such as `'a'` | A native element | A wrapper that is a link or a `span` | A few details matter in practice: - In `<script setup>`, imported components are **not registered by name**, so bind the object, not a string with its name. - Built-in components such as `Transition` can be passed as objects; passing them by name requires registering them first. - `v-model` on `<component>` always compiles to the component contract (`modelValue` plus `update:modelValue`), so it does not work when `is` resolves to a native `<input>` or `<select>`. ## What happens when the value changes When deciding whether it can reuse what is on screen, Vue compares the old and new vnode by **type** and **key**. When the bound component changes, the types differ, so nothing is reused: 1. The old panel is unmounted: `onBeforeUnmount` and `onUnmounted` run, its watchers and computed values are stopped, and its DOM is removed. 2. The new panel is created: its `setup` runs, its template renders, and `onMounted` fires. 3. Switching back repeats the same steps for the first panel, which yields a **brand-new instance** in its initial state. So a half-filled Privacy form is empty again after the user visits General and returns. That is not a bug; the old instance simply no longer exists. It is the single most common surprise with dynamic components, and interviewers like to ask it precisely because candidates who think of tabs as "hidden" get it wrong. ## Same component, different props The opposite case catches people too. If `is` keeps pointing at the same component, for example one `UserPanel` reused for several users, the type and key are unchanged, so Vue **patches** the existing instance with the new props. `setup` does not run again, and a local `ref` that was initialised from a prop keeps the old value. Two fixes: - bind a `:key` to the identity (`:key="userId"`), which makes the vnodes different and forces an unmount plus a fresh mount; - or stop copying the prop: derive the value with `computed`, or reset the local copy in a `watch` on the prop. ## Keeping state across switches When losing state is wrong for the product, there are three usual options: - **Wrap the element in `<KeepAlive>`**: switched-away instances are cached and deactivated instead of unmounted (its caching rules are a topic of their own). - **Lift the state up** into the parent that owns the tabs and pass it down as props, so each panel becomes a stateless view. - **Move it into a shared store** when other screens need the same draft. ## Example: a tabbed settings page ```vue <script setup lang="ts"> import { ref, type Component } from 'vue' import GeneralPanel from './GeneralPanel.vue' import PrivacyPanel from './PrivacyPanel.vue' const tabs: Record<string, Component> = { General: GeneralPanel, Privacy: PrivacyPanel, } const current = ref('General') </script> <template> <button v-for="(_, name) in tabs" :key="name" @click="current = name"> {{ name }} </button> <component :is="tabs[current]" /> </template> ``` `tabs` is a plain object: the component definitions never need to be reactive, and only the active key lives in a `ref`. Each click swaps the panel and unmounts the previous one, so any local state in `PrivacyPanel` starts over on the next visit.