I'm using Vue3 with Ant Design Vue and would like create a 'Modal' component that I can reuse throughout the app.

Something very simple like so:

<template>
    <a-button type="primary" @click="showModal">Open</a-button>
    <a-modal v-model="visible" wrap-class-name="full-modal-to-xl">
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
    </a-modal>
</template>

<script lang="ts">
import { ref, defineComponent } from "vue";

export default defineComponent({
    setup() {
        const visible = ref(false);

        const showModal = () => {
            visible.value = true;
        };
        return { visible, showModal };
    },
});
</script>

But it simply will not work...(no console log, or error).

It does seem to work when you pass visible as a prop, but I really do not want to do that. This should work just as well...

What am I missing?

EDIT: Solution (but not really a solution) Using the Composition API is not feasible with Ant it seems.