We developed a Vue custom directive that replaces DOM elements with a comment depending if the user has permission for specific information. This directive works fine when we use it in any DOM element, but when we apply it to another Vue component it doesn't work as expected because the mounted() function gets called, which we don't want

The problem really is that we don't want to render that component, specifically if it has an API call because this makes the whole system fail.

Here is the directive code:

Vue.directive("checkPermission", {
    bind: (el, binded, vnode) => {
        let permissions = self.$nuxt.$store.$auth.user.permissions;

        if (
            !self.$nuxt.$store.$auth.user.isAdmin &&
            permissions &&
            permissions.length > 0
            ) {
            let hasPermission = false;
            const { action, subject } = binded.value;

            hasPermission = permissions.some(
                permmission =>
                    permmission.action === action &&
                    (Array.isArray(subject) ? subject.includes(permmission.subject) : permmission.subject === subject)
            );

            if (!hasPermission) {
                const comment = document.createComment(" ");

                Object.defineProperty(comment, "setAttribute", {
                    value: () => undefined
                });

                vnode.text = " ";
                vnode.elm = comment;
                vnode.isComment = true;
                vnode.context = undefined;
                vnode.tag = undefined;
                vnode.data.directives = undefined;
                vnode.children = undefined

                if (vnode.componentInstance) {
                    vnode.componentInstance.$el = comment;
                }

                if (el.parentNode) {
                    el.parentNode.replaceChild(comment, el);
                }
            }
        }
    },