能否封装一个类似 v-金年会app官方网

我需要封装一个权限控制指令，当前代码如下：

    app.directive('auth', {
      mounted(el, binding) {
        const permissionnames: string[] = [];
        if ('string' === typeof binding.value) {
          permissionnames.push(binding.value);
        } else {
          permissionnames.push(... binding.value);
        }
        useuserstore().permissionnames.some((name) => permissionnames.includes(name)) || el.remove();
      }
    });

当我这样使用：

// 组件
<div>{{ content }}</div>
<script type="ts" setup>
import { onmounted } from 'vue';
onmounted(() => console.log('auth content mounted.'))
</script>
// 引用组件
<div v-auth="['permission']">
  <mycomponent />
</div>

如果用户不拥有 permission 这个权限页面上不会显示这个元素。

当前的问题是：实际上组件还是被加载了之后又被 remove 掉，组件的 onmounted 生命周期函数已经被调用。

我希望自定义指令 v-auth 能像内置指令 v-if 一样跳过当前组件的加载过程，且不会触发 onmounted 生命周期函数请问如何做？

这里我也试过了 created 和 beforemount 但找不到办法来中断当前组件的加载。抛异常虽然会中断加载，但组件如果没有定义错误捕获则会中断整个页面的加载。