// https://play.vuejs.org/#eNqdU99v2jAQ/ldOfimVukTT9kQD2ob6sElbq23ak19McgEXx7ZshzIh/vde7JCStmrVgoS4u++7n5/37Ku12bZFNmWFL520ATyG1s65lo01LsAeHNZwgNqZBs4IejaEfppKqD6Q5dHqchGgNNoHkD76ri1qmHVpJrVQHs+5LvJUjMqQEbCxSgQk60Y41AGKpYOczNnTzxArlm0IRsOXUslyM+NsXC64FjmbRyv6izwRXqfGLom7UMbjM+Sufv+77ntJq9h+aEyFapyQswTJhzHZBQueVlTLVXbrjabl77kG4Kw0jZUK3bUNklbI2RRipIsJpczdj+jrZrs4+ss1lptn/Ld+1/k4u3Ho0W1poiEWhFthSOGrP79wR/+HIM3QKkK/EPyN3qi26zHBvrW6orZPcLHb71EnUq/++qtdQO2PQ8XjEPIQ8ZyRahYvjP7Q7qfsc+RxfaAtDpLr5HuiIoDFWqoKJhFw/j45xVP+E6rFt6ppxHxFTJXckmz82tyNiCSaUgnvyRkpC6Npf7SCeVJabxc58cfiii/q0VPuvulJjlqrsJYaKSGqyZNH6cN/lXaZnXZwPIoVVUWHncJHh80lLEW5WTlDMpiCVW1zmVANHU7qHtQfjsrE1OxwD8Nqg7E=

// v-model
// parent
<script setup>
import { ref } from 'vue'
import Modal from './Modal.vue'
const isModalOpen = ref(false)
</script>

<template>
Parent <br />
=================== <br />
<button @click="isModalOpen = true">Open Modal</button>
<button @click="isModalOpen = false">Close Modal</button>
<br /><br /><hr />
<Modal v-model="isModalOpen" />
</template>

// Child modal
<template>
  Child (Modal) <br />
=================== <br />
<button @click="modelValue = true">Open Modal</button>
<button @click="modelValue = false">Close Modal</button>
<div v-show="modelValue" class="ModalContent">Modal Content</div>
</template>

<script setup>


const modelValue = defineModel()
</script>

<style>
  .ModalContent {
    padding: 1rem; background: plum;
    margin: 1rem;
  }
</style>