Estoy usando Vue3 con Ant Design Vue y me gustaría crear un componente 'Modal' que pueda reutilizar en toda la aplicación.

Algo muy simple así:

 <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>

Pero simplemente no funcionará... (no hay registro de consola ni error).

Parece funcionar cuando pasas visible como accesorio, pero realmente no quiero hacer eso. Esto debería funcionar igual de bien...

¿Qué me estoy perdiendo?

EDITAR: Solución (pero no realmente una solución) Parece que el uso de la API de Composición no es factible con Ant.