I'm currently opening a dialog component using this

**Parent**

```
<v-btn color="#EF5350" dark small absolute top right fab 
 @click="showDialog">

   <v-icon>zoom_in</v-icon>  

</v-btn>

<UIDialog :dialog="dialog" @updateDialog="dialog = $event" />

<script>
  import UIDialog from '@/components/UI/UIDialog';
  export default {
    data() {
      return {
        dialog: false
      }
    }
    components: {
      UIDialog
    }, 
    methods: {
      showDialog() {
         this.dialog = true;
      }
    }
  }
</script>

```

This opens the dialog since I set dialog to `true`

**Child**

```
<v-dialog v-model="dialog" fullscreen scrollable>
  <v-card>
     This is a test
  </v-card>
</v-dialog>

<script>
 export default {
   props: {
     dialog: { type: Boolean, default: false }
   }, 
   watch: {
     dialog(val) {
       if (!val) this.$emit('updateDialog', false)
     }
   }
 }
</script>

```

I use watch since vue dialog doesn't have event. I managed to close the dialog but I'm still getting 

```
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

```