vue自定义指令bug

问题描述：

页面加载时，报已下错误。同时，页面数据不显示

环境介绍：

已经添加了vue自定义指令permission，实现如下，用以控制元素显示权限

app.directive('permission', (el, binding) => {
    if (!store.hasPermission(binding.value)) {
        if (!binding.value.includes('list')) {
            el.remove();
        } else {
            // 清除不显示的元素
            el.innerHTML = '';
            // 创建一个父节点
            const parentNode = document.createElement('div');
            parentNode.style.width = '100%';
            parentNode.style.display = 'flex';
            parentNode.style.justifyContent = 'center';
            parentNode.style.alignItems = 'center';

            const imgElement = document.createElement('img');
            imgElement.src = '@/../../public/layout/images/noPermission.png'; // 设置图片路径
            imgElement.alt = '无权限访问图片';
            imgElement.style.objectFit = 'contain';
            imgElement.style.height = '40vh';

            parentNode.appendChild(imgElement);
            el.appendChild(parentNode);
        }
    }
});

页面实现代码

<Button 
v-if="dialogForm.docStatus == 0" 
v-permission="'project:info:basic'" 
label="提交" 
type="button" 
severity="success"
 @click="onSave(1)"
></Button>

其他介绍：

已知dialogForm.docStatus已经在初始时定义了，并被赋值0；后续，通过接口，将返回结果赋值给该变量。

乍一看是不是没有问题，但是页面确实也报错，不显示数据。

问题分析：

初始页面时，因为初始赋值，button元素是存在的，通过vue自定义指令，发现需要删除该元素，结果因为页面接口返回结果，出发了v-if，直接元素没了。所以自定义指令中的删除逻辑，发现家被偷了，所以报错了。

解决方法：

直接外面包一层，保证自定义指令逻辑执行时，有元素可以操作。

<div v-if="dialogForm.docStatus == 0">
      <Button 
        v-permission="'project:info:basic'" 
        label="提交" 
        type="button" 
        severity="success" 
        @click="onSave(1)"
        ></Button>
</div>

问题回顾：

对于浏览器的报错，还是没法快速定位，只是答题猜到是因为元素操作导致的，但是结合复杂的页面逻辑，没法准确定位问题（特别是，没有报自己代码错误位置的提示）。有大佬能帮忙解答下，如何定位的技巧吗。