You add a <Teleport to="#modal-root"> to a component, the modal works perfectly in your dev sandbox, and then it silently fails to render the first time it's mounted inside a real page layout — no error in your code, just a console warning about a target that "doesn't exist," even though you can see the element sitting right there in the DOM inspector. The target exists. It just didn't exist yet , at the one moment Vue checked for it.

What You'll Learn

By the end of this article you'll be able to:

Explain exactly when Vue resolves a <Teleport> target, and why that timing — not the target's existence — is the actual bug surface

Use the defer prop correctly, and name the one case it does not fix

Read the real changelog history behind defer : a dozen-plus follow-up patches across Suspense, SSR, and disabled-state handling, the newest landing in the current stable release

Reproduce the classic "target renders after the Teleport" failure and fix it live

Apply the right defensive pattern so your own…