Невозможно заставить диалог vue.js element-ui работать, пока он находится внутри дочернего компонента

Вот родительский компонент:

<template lang="pug">
  .wrapper
    el-button(type="primary", @click="dialogAddUser = true") New User
    hr
    // Dialog: Add User
    add-edit-user(:dialog-visible.sync="dialogAddUser")
</template>

<script>
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
    }
  }
}
</script>

Вот дочерний компонент:

<template lang="pug">
  el-dialog(width="75%", title="New User", :visible.sync="dialogVisible", top="5vh")
    div 'el-dialog-body' - content goes here
</template>

<script>
  export default {
    name: 'add-user',
    props: {
      dialogVisible: Boolean
    }
  }
</script>

Я могу открыть dialog, но при закрытии диалогового окна с помощью верхней правой кнопки внутри dialog я получаю эту ошибку:

Старайтесь не изменять свойство напрямую, так как значение будет перезаписано при повторном рендеринге родительского компонента. Вместо этого используйте данные или вычисленное свойство на основе значения свойства. Изменяемая опора: "dialogVisible"

Позже я попытался поиграть и сделал что-то вроде ниже, но теперь я даже не могу открыть dialog:

<template lang="pug">
  el-dialog(width="75%", title="New User", :visible.sync="visibleSync", top="5vh")
    div 'el-dialog-body' - content goes here 
</template>

<script>
  export default {
    name: 'add-user',
    props: {
      dialogVisible: Boolean
    },
    watch: {
      visibleSync (val) {
        this.$emit('update:dialogVisible', val)
      }
    },
    data () {
      return {
        visibleSync: this.dialogVisible
      }
    }
  }
</script>