Vue instance inside Vue instance : <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>
