I a vue directive that opens a modal window,

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';
    })
  },
};

This works perfectly, what I am now wanting to do is close the model from within the modal component. I feel like I have 2 choices here,

The modal component looks like this,

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

and is used like this,

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

What I am wanting to do is close the modal when the user clicks the .modal__background or clicks the button in .modal__header. I wanted to just add v-close-modal to each of those elements, but the directive cannot access the ref.

Is there a way to get the components ref? I have tried this.$refs in the mounted() hook but I just a get a prototype object back.