vue elementui el-dialog .sync 理解

子组件.vue

<template>
    <div>
        <el-dialog
            :title="data.title"
            :width="width"
            :visible.sync="data.visiable">
            <span>测试</span>
        </el-dialog>
    </div>
</template>
<script>
export default {
  props: {
    data: {
      type: Object
    }
  },
  data () {
    return {
      width: '40%'
    }
  }
}
</script>

父组件.vue

 <ModifyData :data="modifyDialogData"></ModifyData>
 
 
   data () {
    return {
      modifyDialogData: {
        title: 'dialog',
        visiable: true
      }
  }

关闭弹窗，居然影响到了父组件，没有报如下错误：

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: "visiable"

原因时传递的是一个对象，而改变的值时存储在对象里面的。