element ui dialog を component にするとエラーが出る

element ui。
子要素にダイアログを設定するとエラーが出る。

app.js:112146 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "visibleFlag"

found in

---> <TuuhouComponent> at resources/js/components/TuuhouComponent.vue
    <Question> at resources/js/components/Question.vue
        <Root>

ということで、エラーを回避するテンプレートを。

top.vue

<template>

    <div>
        <tuuhou-component :visible="visible" @onModal="onModal(false)"></tuuhou-component>
        <el-button type="primary" @click="onModal(true)">モーダル表示</el-button>
    </div>

</template>

<script>

    export default {
        components: {
            'tuuhou-component': () => import('./TuuhouComponent.vue')
        },
        data() {
            return {
               visible: false
            }
        },
        methods: {
            onModal(visible) {
                this.visible = visible
            },
            showModal() {
                this.$emit('onModal')
            }
        }

    }
</script>

tuuhouComponent.vue

<template>

    <div>
        <el-dialog
                :visible.sync="$props.visible"
                :before-close="hideModal"
        >
              <el-button type="info" @click="hideModal">閉じる</el-button>
        </el-dialog>
    </div>

</template>

<script>
    export default {
        props: {
            visible: {
                type: Boolean
            }
        },
        methods: {
            hideModal() {
                this.$emit('onModal')
            }
        }
    }
</script>