In Vue 3, what problem does Teleport solve?

WHAT THIS TESTS: The interviewer wants to know if you understand the boundary between component logic and DOM layout. Specifically, they are looking for awareness of CSS containing blocks, stacking contexts, and the difference between logical component hierarchy and physical DOM placement. Senior engineers should recognize when a component's visual output needs to escape its ancestral CSS constraints without breaking reactivity or event bubbling.

A GOOD ANSWER COVERS: First, define Teleport as a built-in component that moves a piece of template to a specified DOM target outside the normal Vue component tree while keeping props, emits, and reactivity intact. Second, explain the two core CSS problems: an ancestor with transform, perspective, or filter creates a new containing block, which causes a child with position fixed to position relative to that ancestor instead of the viewport; and a deeply nested modal inherits stacking context limitations from its parents, so a z-index of 999 can still render beneath an overlapping sibling of a grandparent. Third, give a concrete use case such as a modal, notification toast, or dropdown that must visually sit above all other page content. Fourth, note that the logical ownership stays in the component, so state and methods remain colocated even though the DOM node lives elsewhere.

COMMON WRONG ANSWERS: Saying Teleport is just for cleaner HTML or avoiding deeply nested divs misses the point entirely. Claiming that it moves component logic or JavaScript execution to the target node is incorrect; the component instance remains in the Vue tree. Suggesting that absolute positioning or a very high z-index always solves the problem reveals a gap in CSS containing block knowledge. Another red flag is asserting that Teleport breaks event bubbling or reactivity; it does not.

LIKELY FOLLOW-UPS: How does Teleport interact with Vue component lifecycle and refs? Can you Teleport into a target that is not yet in the DOM at mount time? How would you handle multiple modals and focus management when using Teleport? What is the difference between Vue's Teleport and React Portals regarding event bubbling?

ONE CONCRETE EXAMPLE: Imagine a MyModal component inside a div that has a CSS transform for a slide animation. Without Teleport, the modal div with position fixed and z-index 999 positions itself relative to the transformed div, not the viewport, and may be clipped or overlapped by a sidebar with a higher stacking context. Wrapping the modal markup in a Teleport element with the to attribute set to body moves it to the document body, letting it truly fill the viewport and sit above all page-level stacking contexts while the open and close state remains managed inside MyModal.