title: Cannot make vue.js element-ui's dialog work while it's inside a child component
body: <p>Here is the parent component:</p>
  
  <pre><code>&lt;template lang="pug"&gt;
    .wrapper
      el-button(type="primary", @click="dialogAddUser = true") New User
      hr
      // Dialog: Add User
      add-edit-user(:dialog-visible.sync="dialogAddUser")
  &lt;/template&gt;
  
  &lt;script&gt;
  import * as data from '@/components/partials/data'
  import AddUser from './partials/AddUser'
  
  export default {
    name: 'users',
    components: { AddUser },
  
    data () {
      return {
        users: data.users,
        dialogAddUser: false
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is the child component:</p>
  
  <pre><code>&lt;template lang="pug"&gt;
    el-dialog(width="75%", title="New User", :visible.sync="dialogVisible", top="5vh")
      div 'el-dialog-body' - content goes here
  &lt;/template&gt;
  
  &lt;script&gt;
    export default {
      name: 'add-user',
      props: {
        dialogVisible: Boolean
      }
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>I am able to open the <code>dialog</code> but when close the dialog using top right button inside the <code>dialog</code> then I am getting this error:</p>
  
  <blockquote>
    <p>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:
    "dialogVisible"</p>
  </blockquote>
  
  <p>Later I tried to play and did something like below, but now I cannot even open the <code>dialog</code>:</p>
  
  <pre><code>&lt;template lang="pug"&gt;
    el-dialog(width="75%", title="New User", :visible.sync="visibleSync", top="5vh")
      div 'el-dialog-body' - content goes here 
  &lt;/template&gt;
  
  &lt;script&gt;
    export default {
      name: 'add-user',
      props: {
        dialogVisible: Boolean
      },
      watch: {
        visibleSync (val) {
          this.$emit('update:dialogVisible', val)
        }
      },
      data () {
        return {
          visibleSync: this.dialogVisible
        }
      }
    }
  &lt;/script&gt;
  </code></pre>