Vue includes several built-in components that solve structural problems templates alone cannot handle cleanly. <Teleport> renders a component's DOM output somewhere else in the document entirely, which is ideal for modals, toasts, tooltips, and other overlay UI that would otherwise be constrained by ancestor CSS such as overflow or stacking contexts. <KeepAlive> wraps dynamic components so that when one is switched out, its state is cached and can be seamlessly restored when it is brought back, sparing you the work of re-fetching data or re-running setup. <Suspense> coordinates asynchronous setup across nested components, emitting lifecycle events around its fallback and resolved states so you can build coordinated loading UIs without bespoke plumbing for each case.
Not every DOM question needs a new component. v-show and v-if both conditionally render UI but in very different ways. v-show toggles the CSS display of an element while leaving it in the DOM, which is cheap to flip repeatedly. v-if adds or removes the element entirely, which means it pays the full mount and unmount cost and is better when the condition rarely changes or when the off branch is heavy. The .prop modifier on v-bind forces Vue to set a DOM property instead of an HTML attribute, which matters when the attribute and property diverge, such as binding to innerHTML or to custom element properties.
For the most dynamic cases, you can drop down to render functions. A render function is plain JavaScript that returns virtual nodes directly instead of going through a template, which is helpful for highly dynamic output, headless UI libraries, and composition patterns where templates would be awkward or impossible. The companion runtime API Vue.compile() turns a template string into a render function at runtime, blending the two styles when needed, such as when delivering templates from a server or letting users author their own layouts.