记录一个vue 的引入两个组件有相同 ID 问题

最近做项目 遇到一个神坑，
我的一个页面引入了两个组件，两个组件下有相同ID 的 div 如下

这是我组件的 div 高拍仪组件和扫描仪组件都有 这个div

<div width="100%" height="250px" id='ActiveXDivOne'></div>

这是我的页面 引入了 扫描仪和高拍仪 通过 v-show 控制

 <SMY v-show="showDiv('6')"
             ref="smyViewRef"
             @closeNtGpy="closeNtGpy($event)"
             @confimSMY="confimSMY($event)"></SMY>

        <BjGpy v-if="showDiv('7')"
               ref="BjGpyRef"
               @closeBjGpy="closeNtGpy($event)"
               @confimBjGpy="confimNtGpy($event)"></BjGpy>

然而，在我调用高拍仪时 有一个方法里面是这样写的

document.getElementById("ActiveXDivOne").innerHTML =
 " <canvas id=\"cameraCanvas\" width=\"600px\" height=\"450px\" style=\"border:1px solid #d3d3d3;\">";

它却把我的 canvas 追加到了 扫描仪的 div 下面 而且我的软件不停的闪，就像循环调用了一样 因此记录一下这个坑，将ID 改为不同就可以了