如何解决Element UI el-dialog打开一次后无法再次打开问题

<template>
    <div>
        我是子组件
        <el-button type="primary" size="mini" @click="openA">打开ADialog</el-button>
        <ADialog :avisible="visible" :key="key">
        </ADialog>
    </div>
</template>
 
<script>
import ADialog from '@/components/ADialog'
export default {
    data() {
        return {
            visible:false,
            key:Math.random(100)*100
        };
    },
    components:{
        ADialog
    },
    methods:{
        openA(){
            this.key = this.key +1
            this.visible = true
        }
    }
}
</script>
 
<style>
 
</style>

<template>
  <div v-if="visable">
    <el-dialog
      title="我是Adialog"
      :visible.sync="visable"
      width="30%"
      @close="handlerClose"
    >
      <span>我要打开B了</span>
      <el-button   type="primary" size="default" @click="openB"
        >打开Bdialog</el-button
      >
 
      <span slot="footer">
        <el-button @click="visable = false">Cancel</el-button>
        <el-button type="primary" @click="handlerOK">OK</el-button>
      </span>
    </el-dialog>
    <BDialog :bvisable="bvisable" :key="key"></BDialog>
  </div>
</template>
 
<script>
import BDialog from "@/components/BDialog";
export default {
  props: ["avisible"],
  data() {
    return {
      visable: this.avisible,
      bvisable: false,
      key:Math.random(100)*100
    };
  },
  components: { BDialog },
  methods: {
    handlerClose() {
      this.visable = false;
    },
    handlerOK() {
      this.visable = false;
    },
    openB(){
        this.key = this.key+1
        this.bvisable = true
        this.$forceUpdate()
    }
  },
};
</script>
 
<style>
</style>

<template>
  <div v-if="visiable">
        <el-dialog
            title="我是Bdialog"
            :visible.sync="visiable"
            width="20%"
            @close="handlerClose">
            <span></span>
            <span slot="footer">
                <el-button @click="visiable = false">Cancel</el-button>
                <el-button  @click="ok">OK</el-button>
            </span>
        </el-dialog>
        
  </div>
</template>
 
<script>
export default {
    props:[
        "bvisable"
    ],
    data() {
        return {
            visiable: this.bvisable,
        };
    },
    methods:{
        handlerClose(){
            this.visiable = false
        },
        ok(){
            this.visiable = false
        }
 
    }
}
</script>
 
<style>
 
</style>