iview-中Model标签作为组件的根目录无法操作父组件的vif

在开发项目中，遇到了 Model 标签作为新组件的根目录，在关闭 Model 弹框吼，父组件中无法对 v -if 做设置。
父组件代码

<template>
    <div>
        <button @click="clickHandle"> 按钮 </button>
        <model-plugin v-if="show" @closeModelPlugin="closeModelPlugin"></model-plugin>
    </div>
</template>
<script>
import ModelPlugin from './model-plugin'
export default {
    name: 'MetaUpdateWorkflow',
    components: {ModelPlugin},
    data () {
        return {show: false}
    },
    methods: {clickHandle () {this.show = true},
        closeModelPlugin () {this.show = false}
    }
}
</script>
 
<style scoped>
</style>

子组件代码

<template>
    <Modal
        :visible.sync="modal1"
        title="普通的 Modal 对话框标题"
        @on-ok="ok"
        @on-cancel="cancel">
        <p> 对话框内容 </p>
        <p> 对话框内容 </p>
        <p> 对话框内容 </p>
    </Modal>
</template>
<script>
export default {
    name: 'ModelPlugin',
    components: {},
    data () {
        return {modal1: true}
    },
    methods: {cancel () {this.$emit('closeModelPlugin')
        },
        ok () {this.$emit('closeModelPlugin')
        }
    },
    created () {},
    mounted () {}
}
</script>
 
<style scoped>
</style>

问题，在这个时候呢是无法关闭掉弹框。
解决方法：
1、因为父组件点击确定或者取消时，modal1 已经被设置为 false。其实子组件已经不存在了，所以设置的 this.show===false 不起作用。
2、解决方法在 Model 组件中加入一个其他的根目录，当 modal1 为 false 的时候子组件还存在，这个时候设置的 this.show===false 就起作用。
最后子组件代码修改为如下代码，在 Model 外层包裹一层 div

<template>
    <div>
        <Modal
            :visible.sync="modal1"
            title="普通的 Modal 对话框标题"
            @on-ok="ok"
            @on-cancel="cancel">
            <p> 对话框内容 </p>
            <p> 对话框内容 </p>
            <p> 对话框内容 </p>
        </Modal>
    </div>
</template>
<script>
export default {
    name: 'ModelPlugin',
    components: {},
    data () {
        return {modal1: false}
    },
    methods: {cancel () {this.$emit('closeModelPlugin')
        },
        ok () {this.$emit('closeModelPlugin')
        }
    },
    created () {},
    mounted () {}
}
</script>
 
<style scoped>
</style>