Shadcn-vue Dialog issue

The issue is that when I click Edit or Delete, both dialogs pop up, which obiously shouldn’t be the case.

<Dialog>
  <Table v-if="credentialsList">
    <TableCell>
      <DropdownMenu>
        <DropdownMenuTrigger as-child>
          <Button
            aria-haspopup="true"
            size="icon"
            variant="ghost"
            class="dark:hover:bg-transparent"
          >
            <EllipsisVertical class="h-4 w-4" />
            <span class="sr-only">Toggle menu</span>
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end">
          <DialogTrigger class="w-full">
            <DropdownMenuItem
              class="cursor-pointer"
              @click="credentialsDialogRef.editCredential(credential)"
            >
              {{ $t("message.common.edit") }}
            </DropdownMenuItem>                     
          </DialogTrigger>
          <DialogTrigger class="w-full">
            <DropdownMenuItem
              @click="handleDelete(credential)"
              class="cursor-pointer w-full"
            >
              Delete
            </DropdownMenuItem>
          </DialogTrigger>
        </DropdownMenuContent>
      </DropdownMenu>
    </TableCell>
  </Table>
  <credentials-dialog ref="credentialsDialogRef" />
  <delete-dialog ref="deleteDialogRef" />
</Dialog>

I’ve tried using v-if statements on them, but it didn’t help at all.