一个组件如何放入两个a-modal

问题遇到的现象和发生背景

项目使用的ant design框架，一个组件里面放一个a-modal能正常的显示，但是放第二个a-modal就不能显示，并且第一个也不会显示了，它主要实现得功能就是弹一个提示框，然后点击确认后弹出二级确认框，但是一个组件里面放两个a-modal完全就失效了。

问题相关代码，请勿粘贴截图

<!-- 消息提示框 -->
<a-modal title="移交"
         width="740px"
         :visible="visible"
         :confirm-loading="confirmLoading"
         :maskClosable="false"
         @ok="handleOk"
         @cancel="handleCancel">
  <a-form-model layout="horizontal"
                :model="moveForm"
                :label-col="{ span: 7 }"
                :wrapper-col="{ span: 14 }">
    <a-form-model-item label="接收单位">
      <CheckUnitAntD placeholder="请选择部门"
                     :needUnitType="2"
                     ckeckMax="1"
                     @valueChange="change"></CheckUnitAntD>
      <!-- <a-input v-model="moveForm.ReceivingUnit" /> -->
    </a-form-model-item>
    <a-form-model-item label="移交说明">
      <a-textarea v-model="moveForm.describe"
                  placeholder="请输入移交说明,字数限140字..."
                  maxLength="140"
                  :auto-size="{ minRows: 3, maxRows: 5 }" />
    </a-form-model-item>
  </a-form-model>
</a-modal>

<!-- 确认提示框 -->
<a-modal title="提示"
         width="740px"
         :visible="tipsVisible"
         :confirm-loading="confirmLoading"
         :maskClosable="false"
         @ok="confirmMove"
         @cancel="handleCancel">
  <h2>是否确定移交至{{ moveForm.transferBelongUnitId[0].name }}</h2>
</a-modal>

运行结果及报错内容

这两个放在一起完全失效了，如果只放一个就能实现

我的解答思路和尝试过的方法

我把他们单独用了一个div包起来也不行，然后我把确认提示框写成子组件，也不行。

我想要达到的结果

能够实现两个a-model都能用

第二个modal去除遮罩 :mask="false"

<a-modal title="提示"
         :mask="false"
         width="740px"
         :visible="tipsVisible"
         :confirm-loading="confirmLoading"
         :maskClosable="false"
         @ok="confirmMove"
         @cancel="handleCancel">
  <h2>是否确定移交至{{ moveForm.transferBelongUnitId[0].name }}</h2>
</a-modal>

放几个都不影响吧 。只要 区分好 visible属性