How to show a V-Alert above a V-Dialog

I have a global v-alert that I use to show error messages or info, however in a v-dialog when I try to show the alert its hidden behind it. I've tried using elevation and setting the z-index on the v-dialog.

The desired behavior would be for the v-alert to show on top of the v-dialog

Link to VuetifyPlay

<template>
  <v-app>
    <v-container>
      <v-dialog v-model="showDialog">
        <v-btn @click="toggleAlert">Click for Alert</v-btn>
      </v-dialog>
      <v-alert v-model="showAlert">I am the alert</v-alert>
    </v-container>
  </v-app>
</template>

<script setup>
  import { ref } from 'vue'

  const msg = ref('Hello World!')
  const showDialog = ref(true)
  const showAlert = ref(false)
  const toggleAlert = () => {
    showAlert.value = !showAlert.value
  }
</script>

The main issue with setting z-index of the v-dialog is that it is rendered within a v-overlay, meaning v-dialog exists within a different stacking context than the v-alert.

Setting z-index of the v-alert will work though at placing it above the overlay.

v-overlay has a z-index of 2400, so any value greater than that will work.

.v-alert {
  z-index: 2401
}