I una directiva vue que abre una ventana modal,

 const modalOpen: DirectiveOptions = { bind(el: HTMLElement, binding: DirectiveBinding, vnode: any) { el.addEventListener('click', () => { vnode.context.$refs[binding.value].show = true; document.body.style.overflowY = 'hidden'; }) }, };

Esto funciona perfectamente, lo que ahora quiero hacer es cerrar el modelo desde el componente modal. Siento que tengo 2 opciones aquí,

El componente modal se ve así,

 <div class="modal" :class="{ 'modal--show': show }"> <div class="modal__background"></div> <div class="modal__content"> <div class="modal__header"> <button type="button">&times;</button> </div> <div class="modal__body"> <slot></slot> </div> </div>

y se usa así,

 <Modal ref="modal-1"> <p>Hello World, I am the modal 1</p> </Modal>

Lo que quiero hacer es cerrar el modal cuando el usuario hace clic en .modal__background o hace clic en el botón en .modal__header . Solo quería agregar v-close-modal a cada uno de esos elementos, pero la directiva no puede acceder a la referencia.

¿Hay alguna manera de obtener la referencia de los componentes? Intenté this.$refs en el gancho mounted() , pero solo recuperé un objeto prototipo.