No event bus needed and v-model

Update:

When I first answered this, I posted my answer as a "workaround", since it didn't felt completely "right" at the time and I was new to Vue.js. I wanted to open or close the dialog by using a v-model directive, but I couldn't get there. After a time I found how to do this in the docs, using the input event and the value property, and here's how I think it should be done without an event bus.

Parent component:

<template>   <v-btn color="accent" large @click.stop="showScheduleForm=true">       <ScheduleForm v-model="showScheduleForm" /></template><script>import ScheduleForm from '~/components/ScheduleForm'export default {  data () {    return {      showScheduleForm: false    }  },  components: {    ScheduleForm  }}</script>

Child component (ScheduleForm):

<template><v-dialog v-model="show" max-width="500px">  <v-card>    <v-card-actions>      <v-btn color="primary" flat @click.stop="show=false">Close</v-btn>    </v-card-actions>  </v-card></v-dialog></template><script>export default {  props: {     value: Boolean  },  computed: {    show: {      get () {        return this.value      },      set (value) {         this.$emit('input', value)      }    }  }}</script>

Original answer:

I was able to work around this without the need for a global event bus.

I used a computed property with a getter AND a setter. Since Vue warns you about mutating the parent property directly, in the setter I simply emitted an event to the parent.

Here's the code:

Parent component:

<template>   <v-btn color="accent" large @click.stop="showScheduleForm=true"></v-btn>      <ScheduleForm :visible="showScheduleForm" @close="showScheduleForm=false" /></template><script>import ScheduleForm from '~/components/ScheduleForm'export default {  data () {    return {      showScheduleForm: false    }  },  components: {    ScheduleForm  }}</script>

Child component (ScheduleForm):

<template><v-dialog v-model="show" max-width="500px">  <v-card>    <v-card-actions>      <v-btn color="primary" flat @click.stop="show=false">Close</v-btn>    </v-card-actions>  </v-card></v-dialog></template><script>export default {  props: ['visible'],  computed: {    show: {      get () {        return this.visible      },      set (value) {        if (!value) {          this.$emit('close')        }      }    }  }}</script>

There are many ways to do it such is Vuex,Event Bus,Props with which you can manage whether the modal have to open or to close.I will show you my favourite way using the .sync modifier:

First i will simplify you question(the code part)

Parent component

<template>   <div>     <button @click="dialog=true">Open Dialog</button>     <Child :dialog.sync="dialog" />   </div></template><script>import Child from './Child.vue'export default {    components: {      Child    },    data: {      return {        dialog: false      }   }}</script>

Child(Dialog) Component

<template>  <v-layout row justify-center>    <v-dialog v-model="dialog" persistent max-width="290">      <v-card>        <v-card-title class="headline">Use Google's location service?</v-card-title>        <v-card-text>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</v-card-text>        <v-card-actions>          <v-spacer></v-spacer>          <v-btn color="green darken-1" flat @click.native="close">Close</v-btn>        </v-card-actions>      </v-card>    </v-dialog>  </v-layout></template><script>  export default {    props: {        dialog: {        default: false      }    },    methods: {        close() {        this.$emit('update:dialog', false)      }    }  }</script>

Simple minimal working example

codepen

Pass value prop as value to v-dialog component, and from child dialog emit input event whenever you want to close it:

//CustomDialog.vue<v-dialog :value="value" @input="$emit('input', $event)">  <v-btn color="red" @click.native="$emit('input', false)">Close</v-btn></v-dialog>...props:['value']

and add v-model to your parent

//Parent.vue<custom-dialog v-model="dialog">

So no custom event bus, no data, no watch, no computed.