Teleport Target Removal: State Persistence Across Conditional Rendering

Teleport target removal and state persistence in Vue 3

When the target element is toggled via v-if, the teleported component tree is unmounted and re‑created each time the target reappears. This is the expected behavior: Vue 3’s <Teleport> removes its bound content from the DOM when the target is gone, and the component’s internal reactive state is reset upon re‑addition. Lifecycle hooks such as onUnmounted fire on removal and onMounted fires on re‑mount, so any data bound to the component’s own data() or setup() reactive state is lost unless it is externalized.

If the target resides inside a Shadow DOM host, <Teleport> can still move content into the host’s light DOM, but the shadow boundary may interfere with proper re‑attachment. In practice, the component instance is destroyed when the target is removed, and reactive state is typically lost because the underlying VM is torn down.

Preservation and reset patterns

1. Use <KeepAlive> around the <Teleport> to retain the component instance across toggles. This prevents full unmount but does not automatically preserve reactive data that depends on the component’s internal state.
2. Replace v-if with v-show on the target element. The target remains mounted, so <Teleport> moves the rendered output without unmounting the component, keeping reactive state intact.
3. Externalize reactive state via provide/inject or a global store (e.g., Pinia). State stored outside the component survives unmount/re‑mount cycles regardless of the rendering pattern.

Version assumption: Behavior is consistent across Vue 3 minor releases, but edge cases may differ. Verify the exact Vue 3 version in use.

Missing diagnostic detail: Which Vue 3 minor version are you using, and does the teleported component define its own reactive data or computed properties? This determines whether <KeepAlive>, v-show, or state externalization is the most reliable approach.