Vue 3 composition API events bus implementation

useEvents.js

const eventBus = new Comment('global-event-bus');
const listeners = {};

export const EVENT_NAME = 'MyEventName';

export default function () {
  /**
   * @param {string} event
   * @param {function} callback
   * @returns {number} index
   */
  const on = (event, callback) => {
    const index = new Date().getTime();
    listeners[index] = {
      listener: ({ detail }) => {
        callback(detail);
      },
      event,
    };
    eventBus.addEventListener(event, listeners[index].listener);
    return index;
  };

  /**
   * @param {number} index
   */
  const off = (index) => {
    const listener = listeners[index];
    if (!listener) {
      return;
    }
    eventBus.removeEventListener(listener.event, listener.listener);
    delete listeners[index];
  };

  /**
   * @param {string} event
   * @param {object} data
   */
  const emit = (event, data) => {
    eventBus.dispatchEvent(
      new CustomEvent(event, {
        detail: data,
      })
    );
  };

  return {
    on,
    off,
    emit,
  };
}