SOURCE

const CustomOverlay = {
    name: 'CustomOverlay',
    template: `
    <div class="custom-overlay" v-show="visible" @click="$_handleClick"></div>
    `,
    props: {
        visible: {
            type: Boolean,
            default: false,
        }
    },
    methods: {
        $_handleClick() {
            this.$emit("update:visible", false);
        }
    },
};

const App = {
    name: 'App',
    template: `
    <div>
        <custom-overlay :visible.sync="visible" />
    </div>
    `,
    components: { CustomOverlay },
    data() {
        return {
            visible: true,
        }
    }
}

new Vue({
    el: '#app',
    components: {
        App,
    }
});    

<div id="app">
	<app></app>
</div>

.custom-overlay {
    width: 1000px;
    height: 1000px;
    background: red;
}