Why doesn't Vue 3 see the global directive?

Question

Vue.js

Declared in main.js:

import directives from "./extensions-vue/directives";
app.directive(directives);
app.mount("#app");

And in the directive file:

export default {

  widthAsChild: {
    mounted(el, binding) {
      binding.instance.widthAsChild(el);
      window.addEventListener("resize", () => {
        binding.instance.widthAsChild(el);
      });
    },
    updated(el, binding) {
      binding.instance.widthAsChild(el);
    },
  },

};

But vue does not see this directive from the global directives file, if I include it in the component, it works.

Answer 1

app.directive(directives);

What the hell is this? Open the documentation , see what parameters the directive takes.