Teleport, and the modal that no longer fights z-index

A modal rendered inside a component is inside that component’s stacking context, so a parent with overflow: hidden or a transform clips it and no z-index helps.

<template>
  <button @click="open = true">Edit</button>

  <Teleport to="body">
    <Modal v-if="open" @close="open = false" />
  </Teleport>
</template>

The component stays where it belongs logically — its props, events and state are local — and the DOM node moves. That separation is what the portal pattern is for and Vue 2 required a library for it. The target must exist when the component mounts, so teleporting into another component’s output is an ordering problem; disabled is the escape hatch for server rendering, where there is no body to move to.