title: Cannot dispatch function from component to parent Vue
body: <p>I have a simple Vue demo that shows a user a modal when they click a button:</p>
  
  <p><a href="http://plnkr.co/edit/lZPD7HOjKFsNVNmnWAOB?p=preview" rel="nofollow">http://plnkr.co/edit/lZPD7HOjKFsNVNmnWAOB?p=preview</a></p>
  
  <p>The problem is, I'm also trying to use a plugin that generates a QR code that would go inside of the modal, so I set up a method inside my component that uses <code>$dispatch</code> to call a function called <code>showQR</code>:</p>
  
  <pre><code>    methods: {
                  showQR: function(){
                       console.log("Dispatching event for QR code")
                       this.$dispatch('showQR');
                       return this.showModal = true    
              }
       }
  </code></pre>
  
  <p>The function inside my parent Vue object looks like this:</p>
  
  <pre><code>new Vue({
          el: 'body',
          events: {
              showQR: function(){
                  console.log("Inside the parent Vue")
                  new QRCode(document.getElementById("qrcode"), "http://stackoverflow.com/");
              }
          }
      });
  </code></pre>
  
  <p>I do get the message <code>"Dispatching event for QR code"</code> from the component, but function on the parent Vue isn't working. I can get the QR code to show up if I put the logic inside of the template, but I'd rather avoid that. Any suggestions on how to make <code>$dispatch</code> work? Am I targeting the right Vue? Using VueRouter for this btw. Any help would be great! </p>