JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/vuex@4.0.0-beta.4/dist/vuex.global.js"></script>
<script src="https://unpkg.com/vue-router@4.0.0-beta.3/dist/vue-router.global.js"></script>
<script src="https://unpkg.com/mitt/dist/mitt.umd.js"></script>
<div id="app">
   <custom-component v-loading="eventHandler" />
</div>

JavaScript

const emitter = mitt();

const customComponent = { template: '<h1>Example</h1>' };

const app = Vue.createApp({
    components: { customComponent },

    setup() {
        setTimeout(() => {
            emitter.emit('loadingEvent', { colour: 'Green' });
        }, 1000);
        
        const eventHandler = e => console.log('Handled!', e);
        
        return { eventHandler };
    },
});

app.directive('loading', {
    mounted(el, binding) {
        const func = binding.value;

        emitter.on('loadingEvent', data => {
            // your logic here...
            func(data);
        });
    },
});

app.mount('#app');