Vuetify 3 | v-dialog close it after it opens programatically

afterEnter is not a good place to control dialog visibility. It is meant for side effects, not for cancelling the dialog.

To fix it, you can either use watch instead of afterEnter:

watch(dialog, async (val) => { if (!val) return try { await someApi() } catch { dialog.value = false } })

Or better still, run your logic before opening by moving your API call outside the dialog lifecycle, something like:

<template #activator="{ props: activatorProps }"> <v-btn v-bind="activatorProps" :disabled="!Boolean(props.itemId)" class="my-auto" @click="handleOpen" > Container Management </v-btn> </template> const dialog = ref(false) const handleOpen = async () => { try { // API call first await someApi() // Only open if success dialog.value = true } catch { dialog.value = false } }