Dialog doesn't work using Inertia + Vue3

[manurgdev]

I am trying to run the Dialog component within a project, but I always get the same error:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'value') at ReactiveEffect.fn (dialog.js:1:2532)

At first I thought it might be a problem with the logic I was applying inside Dialog, but this error persists even using the example in the documentation.

Before the error, you can see several warnings about the life cycle of Vue, I put a screenshot of them too.

**Version used: ** 1.7.14

Code:

<script setup>
import { Dialog, DialogDescription, DialogPanel, DialogTitle } from '@headlessui/vue';
import { ref } from 'vue';

const isOpen = ref(true);

function setIsOpen(value) {
	isOpen.value = value;
}
</script>

<template>
	<Dialog :open="isOpen" @close="setIsOpen">
		<DialogPanel>
			<DialogTitle>Deactivate account</DialogTitle>
			<DialogDescription> This will permanently deactivate your account </DialogDescription>

			<p>
				Are you sure you want to deactivate your account? All of your data will be permanently removed. This action
				cannot be undone.
			</p>

			<button @click="setIsOpen(false)">Deactivate</button>
			<button @click="setIsOpen(false)">Cancel</button>
		</DialogPanel>
	</Dialog>
</template>

Has anyone encountered the same problem and been able to solve it? Thanks

[manurgdev]

Fixed, nevermind.

I had to update some tailwindcss and vite dependencies to get it working again.