My goal is to create a directive that when clicked will recursively search through parents until it's finds the first component (vnode) wih the tag role="blinkable" and trigger the function 'blink()'.

I do not know how to find the first parent of the element with the directive 'v-blink-popup'. I've added a role tag to the component incase that would help. But when looking at the el or node of the directive, the parent property is null? There has to be a way to do this.

I've created a directive called v-blink-popup...

BlinkPopup.js (global directive)

const blinkPopup = {
  bind: (el, binding, vnode) => {
    el.style.fontSize = 24 + 'px'
    el.style.backgroundColor = 'red'

    // find parent vnode
    console.log('el', el)
  }
}
export default blinkPopup 
...
Vue.directive('blink-popup', blinkPopup)

BlinkDialog.vue (component)

<template>
  <div role='blinkable'>
      <div class="bg-white rounded">
        <slot />
      </div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    blink() {
      console.log('blink me')
    },
  },
}
</script>

Page.vue (page file)

<template>
  <div>
    <BlinkDialog>
      Here is my component
      <button v-blink-popup> close </button>
    </BlinkDialog>
  </div>
</template>