el-dialog 嵌套子组件，参数覆盖问题

在项目开发中，遇到vue dialog嵌套组件，每次打开弹窗都会加载上一次的缓存的问题，做个笔记记录一下解决方法。
普遍说在dialog外嵌套一层div 并对div加v-if的方法来促使子组件的mounted钩子函数运行，但是我在使用过程中并没有生效

<div v-if="dialog['测试弹窗']">
      <el-dialog
          class="gzdev"
          title="测试弹窗"
          :visible.sync="dialog['测试弹窗']"
          width="1200px"
          top="0px"
          @close="dialog.测试弹窗 = false;"
          :show-close="false"
          :close-on-click-modal="false"
          center
        >
          <div class="test-warp">
            <test-view></test-view>
          </div>
      </el-dialog>
</div>

我用了另外一种方式，就是通过在父组件中监听isShowdialogAdd的值的变化，再重新对addForm进行复制的方式来触发子组件中mounted钩子函数

<div v-if="isShowdialogAdd">   
            <el-dialog title="编辑消息" v-loading="loading" :visible.sync="isShowdialogAdd"  width="45%" @close='close()'>
                <div class="dialog-content">
                    <addMessage :addForm="addForm" v-on:dialogLoading="dialogLoading" @ifShowAddDialog="ifShowAddDialog"></addMessage>
                </div>
            </el-dialog>

        </div>


    watch:{     
        isShowdialogAdd:{
            handler:function(val){
               if(val) {
                   this.addForm = this.initAddForm();
               }
            }
        }
    },