Cannot dispatch function from component to parent Vue
<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>