Nuxt3 Modal

Modal.vue

************* inside main page *************
<template>
    <div>
      <Modal :open="modalOpen" @update:open="newValue => modalOpen = newValue" />
      <button @click="openModal = true">Show Modal</button>
    </div>
</template>

<script setup>
    const modalOpen = ref(false)
 </script>
 
 ************* inside Modal component *************
<template>
  <div>
    <div v-if="open">
      <button  @click="$emit('update:open', false)">Close</buttom>
      <h1>Hello Modal</h1>
    </div>
  </div>
</template>

<script setup>
defineProps({
    open: {
        default: false,
        type: Boolean,
    },
})
</script>