fix(app): modal TransitionChild component binding error

This pull request is intended to fix the transition binding to the TransitionChild component from @headlessui/vue

Author: Selemondev

packages/nuxt-ui-vue/src/App.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
+import { ref } from 'vue'
+
+const isOpen = ref(false)
 </script>
 
 <template>
-  <div class="grid place-items-center w-full min-h-screen">
-    <UButtonGroup size="sm" orientation="horizontal">
-      <UButton icon="ph:music-notes" label="Music" />
-      <UButton icon="ph:music-notes" label="Music" color="red" />
-      <UButton icon="ph:music-notes" label="Music" color="red" />
-    </UButtonGroup>
+  <div class="grid place-items-center min-h-screen w-full">
+    <UButton label="Open" @click="isOpen = true" />
+    <UModal v-model="isOpen" fullscreen>
+      <!-- Content -->
+    </UModal>
   </div>
 </template>

packages/nuxt-ui-vue/src/components/overlays/Modal/UModal.vue

@@ -109,7 +109,7 @@ export default defineComponent({
 <template>
   <TransitionRoot :appear="appear" :show="isOpen" as="template">
     <HDialog :class="wrapperClass" v-bind="attrsOmitted" @close="(e) => !preventClose && close(e)">
-      <TransitionChild v-if="overlay" as="template" :appear="appear" v-bind="overlayTransitions">
+      <TransitionChild v-if="overlay" as="template" :appear="appear" :bind="overlayTransitions">
         <div :class="[variant.overlayBase, variant.overlayBackground]" />
       </TransitionChild>