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>