title: Vue instance inside Vue instance
body: <p>Sup people!</p>
  
  <p>I got this HTML code here:</p>
  
  <pre><code>// index.html
  &lt;div data-init="component-one"&gt;
    &lt;...&gt;
  
   &lt;div data-init="component-two"&gt;
     &lt;button @click="doSomething($event)"&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This basically references a Vue instance inside another Vue instance if I understood everything correctly. The respective JS code is split up in two files and looks like this:</p>
  
  <pre><code>// componentOne.js
  new Vue(
    el: '[data-init="component-one"]',
    data: {...},
    methods: {...}
  );
  
  
  // componentTwo.js
  new Vue(
    el: '[data-init="component-two"]'
    data: {...}
    methods: {
      doSomething: function(event) {...}
    }
  );
  </code></pre>
  
  <p>Now, the problem with this is, that <code>doSomething</code> from <code>componentTwo</code> never gets called.</p>
  
  <p>But when I do some inline stuff, like <code>{{ 3 + 3 }}</code>, it gets computed like it should. So Vue knows there is something. And it also removes the <code>@click</code> element on page load.</p>
  
  <p>I tried fiddling around with <code>inline-template</code> as well, but it doesn't really work as I'd expect it to in this situation. And I figured it isn't meant for this case anyway, so I dropped it again.</p>
  
  <p>What would the correct approach be here? And how can I make this work the easiest way possible with how it's set up right now?</p>
  
  <p>The Vue version we use is <code>2.1.8</code>.</p>
  
  <p>Cheers!</p>