Properly using click:outside with vuetify dialog

Question

I have a v-dialog that I use to pop up a date picker when needed. To show it, I bind a value with v-modle. I use the click:outside events to trigger to function that is supposed to close it once it's clicked outside so I can trigger it again (if I click outside, the dialog is dismissed, but the value stays 'true', so I can't show it more than once). There must be something I'm doing wrong.

Here's my dialog :

<template>
  <v-dialog
    v-model="value"
    @click:outside="closeDialog"
  >
    <v-date-picker
      v-model="date"
    />
    <v-divider/>
    <div>fermer</div>
  </v-dialog>
</template>

<script>
  export default {
    name: 'DatePickerDialog',
    props: ['value'],
    data() {
      return {
        colors,
        date: null,
      }
    },
    methods: {
      closeDialog() {
        this.value = false;
      }
    }
  }
</script>

And what calls it is as simple as this :

<template>
  <div>
    <v-btn @click="inflateDatePicker">inflate date picker</v-btn>
    <date-picker-dialog v-model="showDatePicker"/>
  </div>
</template>

<script>
import DatePickerDialog from '../../../../views/components/DatePickerDialog';

export default{
  name: "SimpleTest",
  components: {
    DatePickerDialog
  },
  data() {
    return {
      showDatePicker: false,
    };
  },
  methods:{
    inflateDatePicker() {
      this.showDatePicker = true;
    },
  },
}
</script>

So I can inflate it with no problem. Then though I'm not able to go inside closeDialog() (verified by debugging and trying to log stuff). So what is happening that makes it so I'm not able to enter the function? Documentation doesn't specify if you need to use it differently from regular @click events

Answer 1

The problem was in my closeDialog function. this.value = false did not notify the parent component of the value change. So I had to change it to this in order for it to work properly :

closeDialog() {
  this.$emit('input', false);
},

With this is works perfectly fine.