title: Vue Vuetify open dialog component onclick
body: <p><strong>Edit</strong>: I figured out why the dialog isnt opening. The child component is not receiving the <code>openComment</code> event. I checked in the root component, and that is receiving the event correctly. Any suggestions on why sibling components are not receiving the events? It could also be because I am not using the component in anything, but because it is the modal itself, I dont really want to import it to any other <code>vue</code> file.</p>
  
  <p>I am trying to figure out a way to open a modal dialog from my toolbar. The toolbar lives in one component file, and the dialog lives in another component file. I am trying to acheive this using events, but i cant seem to get it to trigger. What i have tried is sending a custom even which is supposed to see the set the vmodel for the dialog to true. I am using Vuetify to create the dialogs.</p>
  
  <p>My dialog component file is:</p>
  
  <pre><code>&lt;template&gt;
  &lt;v-dialog persistent
      v-model="commentDialog"
      transition="dialog-transition"&gt;
      &lt;v-card&gt;
      &lt;v-card-title primary-title&gt;
          Add a comment
      &lt;/v-card-title&gt;
      &lt;v-card-text&gt;
          &lt;v-flex xs12 sm6 md4&gt;
          &lt;v-text-field label="Legal first name*" required&gt;&lt;/v-text-field&gt;
          &lt;/v-flex&gt;
      &lt;/v-card-text&gt;
      &lt;/v-card&gt;
  &lt;/v-dialog&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { bus } from '../main'
  export default {
  name: 'CommentModal',
  data() {
      return {
      commentDialog: false
      }
  },
  created() {
      bus.$on('openComment', function () {
      this.commentDialog = true
      })
  },
  }
  &lt;/script&gt;
  
  &lt;style&gt;
  
  &lt;/style&gt;
  </code></pre>
  
  <p>The toolbar component includes the following: </p>
  
  <pre><code>&lt;template&gt;
  &lt;v-btn fab small
      @click="commentThis($event)"
      &lt;v-icon&gt;fas fa-comment&lt;/v-icon&gt;
  &lt;/v-btn&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  commentThis: function (e) {
      bus.$emit('openComment')
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Bonus and follow up question to this question would be how can i see the event bus on the vue chrome debugger?</p>