Vue Dialog/Modal/Toast component with v-model binding for closing and opening

Example.md

Dialog.vue:

<template>
    <div>
        <button @click="close">Close</button>
        <slot />
    </div>
</template>

<script>
export default {
    name: 'Dialog',
    
    props: {
        value: {
            type: Boolean,
            required: true,
            default: false,
        },
    },
    
    close () {
        this.$emit('input', false);
    },
}
</script>

Another component:

<template>
    <div>
        <button @click="openDialog">Show Dialog</button>
        <Dialog v-model="showDialog">
            Hello, world!
        </Dialog>
    </div>
</template>

<script>
export default {
    name: 'Dialog',
    
    data () {
        return {
            showDialog: false,
        }
    },
    
    methods: {
        openDialog () {
            this.showDialog = true;
        }
    }
}
</script>