fix(components): hydration attribute mismatch with vue 3.4 (#1199)

src/runtime/components/overlays/Modal.vue

@@ -29,13 +29,14 @@
 <script lang="ts">
 import { computed, toRef, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { Dialog as HDialog, DialogPanel as HDialogPanel, TransitionRoot, TransitionChild } from '@headlessui/vue'
+import { Dialog as HDialog, DialogPanel as HDialogPanel, TransitionRoot, TransitionChild, provideUseId } from '@headlessui/vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
 import type { Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { modal } from '#ui/ui.config'
+import { useId } from '#imports'
 
 const config = mergeConfig<typeof modal>(appConfig.ui.strategy, appConfig.ui.modal, modal)
 
@@ -107,7 +108,7 @@ export default defineComponent({
     function close (value: boolean) {
       if (props.preventClose) {
         emit('close-prevented')
-        
+
         return
       }
 
@@ -116,6 +117,8 @@ export default defineComponent({
       emit('close')
     }
 
+    provideUseId(() => useId())
+
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,