I'm using the shadcn-vue library for a dialog and dropdown in my Vue 3 project with TypeScript. However, after opening the dialog, all TypeScript functionalities stop working, including type checking and autocompletion.

My Setup: Vue.js 3

Vite

shadcn-vue

TypeScript

Pinia (optional, if relevant)

Tailwind CSS

Problem Details: The application works fine until I open the dialog.

Once I open the dialog (or dropdown), TypeScript seems to stop working:

No type checking

No autocompletion

Console logs do not display expected TypeScript warnings/errors

Even after closing the dialog, the TypeScript behavior does not return.

Code Example:

<script setup lang="ts">
import { ref, watch } from 'vue'
import { MoreHorizontal } from 'lucide-vue-next'
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog'
import { Button } from '@/components/custom/button'

interface Props {
    subject: {
        id: number
        title: string
        description?: string
    }
}

const props = defineProps<Props>()

const openDeleteSubjectValidation = ref(false)
const toggleState = ref(false)
const handleDeleteValidation = () => {
  openDeleteSubjectValidation.value = true
  toggleState.value = false
}
watch(openDeleteSubjectValidation, (newVal) => {
  console.log('1 openDeleteSubjectValidation', openDeleteSubjectValidation.value)
  console.log('1 toggleState', toggleState.value)
})
watch(toggleState, (newVal) => {
    console.log('2 openDeleteSubjectValidation', openDeleteSubjectValidation.value)
    console.log('2 toggleState', toggleState.value)
})
</script>

<template>
  <DropdownMenu v-model:open="toggleState">
    <DropdownMenuTrigger as-child>
      <Button variant="ghost" class="h-8 w-8 p-0">
        <span class="sr-only">Open menu</span>
        <MoreHorizontal class="h-4 w-4" />
      </Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent align="end">
      <DropdownMenuLabel>Actions</DropdownMenuLabel>
      <DropdownMenuItem>
        Sub Mata Pelajaran
      </DropdownMenuItem>
      <DropdownMenuSeparator />
      <DropdownMenuItem>Edit</DropdownMenuItem>
      <DropdownMenuItem @click="openDeleteSubjectValidation = true">Hapus</DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>

  <Dialog v-model:open="openDeleteSubjectValidation">
        <DialogContent
            class="overflow-y-auto data-[state=open]:animate-contentShow fixed top-[50%] left-[50%] max-h-[85vh] w-[90vw] max-w-[700px] translate-x-[-50%] translate-y-[-50%] rounded-[6px] bg-white p-[25px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none z-[100]"
        >
            <DialogHeader>
                <DialogTitle>
                </DialogTitle>
                <DialogDescription>
                </DialogDescription>
            </DialogHeader>

            <div class="space-y-6 text-center text-mauve12 m-0 text-[17px] font-semibold">
                Yakin ingin menghapus mata pelajaran "<strong>{{ props.subject.title }}</strong>" ?
            </div>

            <DialogFooter class="flex sm:justify-center">
                <Button type="button" variant="danger" class="m-1" @click="handleDeleteValidation">
                    Hapus
                </Button>
            </DialogFooter>

        </DialogContent>
    </Dialog>
</template>

TypeScript behavior stops working across the application.

What I've Tried: Checked the shadcn-vue documentation and examples.

Ensured all dependencies are up to date.

Restarted Vite and TypeScript server.

Tried different TypeScript versions.

Verified that the issue happens even with a fresh Vite project using shadcn-vue.

Questions: Has anyone faced this issue before?

Could there be a reactivity issue or component-related issue affecting TypeScript?

Are there any known workarounds?