[Bug] UPopover appears on top of UModal based on component declaration order

Environment

Environment

Vite project info (@nuxt/ui/vite):

Is this bug related to Nuxt or Vue?

Vue

Package

v4.x

Version

v4.8.1

Reproduction

https://codesandbox.io/p/devbox/boring-dew-4myj43?workspaceId=ws_DQFGyLZQ7dm97uDZVPVdBv (fix permission)

Description

If I try to use the UModal and UPopover components in this order:

    <UModal>
      <UButton label="Open modal" color="neutral" variant="subtle" />

      <template #content>
        <div class="h-48 m-4">Some modal</div>
      </template>
    </UModal>

    <UPopover :dismissible="false">
      <UButton label="Open popover" color="neutral" variant="subtle" />

      <template #content>
        <div class="size-48 m-4 inline-flex">Some popover</div>
      </template>
    </UPopover>

When opening the popover first and then the modal, the popover appears on top of the modal.

If the components are declared in the opposite order, the bug no longer reproduces.

Additional context

No response

Logs

Start with the linked CodeSandbox reproduction and compare the UModal and UPopover behavior when they are declared in each order. Trace how their overlay layers are created and verify the fix by opening the popover first, then the modal; done means the modal remains above the popover in both declaration orders.