How to create a npm package with multiple vue directives? Or should I create one package per directive?

I am able to create an npm package by exporting a single vue directive in the src/index.js file. But how can I create a package that lets you use multiple vue directives. I am not able to export two vue directives in the same index.js file.

export default Vue.directive('directive1', {
  inserted: function (el, binding, vnode) {
    el.addEventListener('mouseup', (e) => mouseup(e, el, _data))
    el.addEventListener('mousedown', (e) => mousedown(e, el, _data))
    el.addEventListener('mousemove', (e) => mousemove(e, el, _data))
    setDraggerOffset(el, _data)
  }
})

export default Vue.directive('directive2', {
  inserted: function (el, binding, vnode) {
    el.addEventListener('mouseup', (e) => mouseup(e, el, _data))
    el.addEventListener('mousedown', (e) => mousedown(e, el, _data))
    el.addEventListener('mousemove', (e) => mousemove(e, el, _data))
    setDraggerOffset(el, _data)
  }
})

You are trying to export two defaults. A default means you can get the value by just saying import MyPack from 'path/to/package'. You need to export constants, and destructure where you are importing. Learn more here

In the package

export const vD1 = Vue.directive('directive1', {
  ...
})

export const vD2 = Vue.directive('directive2', {
  ...
})

Wherever you're importing:

import { vD1, vD2 } from 'path/to/package';