title: Vuejs nested components with inline-template
body: <p>I'm going to end up having a LOT of different components nested for each page. I have a component view for each page in my application. On each page, there are different Vue instances that will re-use components I have made such as slider's, tabber's, carousel, etc.</p>
  
  <p>I'm trying to restructure this since a lot of Vue instances were interfering with each other and I realized I should only have one main Vue instance with a lot of inner components.</p>
  
  <p>This is what I have set up so far:</p>
  
  <p><a href="http://jsfiddle.net/jmtg5r4s/" rel="noreferrer">http://jsfiddle.net/jmtg5r4s/</a></p>
  
  <p>The problem is is that it stops after loading the home view component. It won't load any nested components unless I have a template set for them which I don't want to do because I want to take advantage of Laravel blade syntax and not use regular HTML. Plus all of my server-side helpers, etc.</p>
  
  <p>Javascript:</p>
  
  <pre><code>var App = new Vue({
      el: '#app',
  
      attached: function() {
          console.log('main app loaded');
      },
  
      components: {
          'home-view': {
  
              attached: function() {
                  console.log('home view loaded');
              },
  
              components: {
                  'home-slider': {
  
                      attached: function() {
                          console.log('homepage slider loaded');
                      },
  
                      components: {
                          'slider': {
  
                              template: '#slider-template',
                              replace: true,
  
                              attached: function() {
                                  console.log('general slider component loaded');
                              },
  
                              components: {
                                  'slide': {
  
                                      template: '#slide-template',
                                      replace: true,
  
                                      props: ['index', 'text'],
  
                                      attached: function() {
                                          console.log('general slide component loaded');
                                      }
  
                                  }
                              }
  
                          }
                      }
  
                  }
              }
  
          }
      }
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;script type="x-template" id="slider-template"&gt;
      &lt;div class="slider"&gt;
          &lt;content&gt;&lt;/content&gt;
      &lt;/div&gt;
  &lt;/script&gt;
  
  &lt;script type="x-template" id="slide-template"&gt;
      &lt;div class="slide" id="slide{{ index }}"&gt;
          {{ text }}
      &lt;/div&gt;
  &lt;/script&gt;
  
  &lt;div id="app"&gt;
      &lt;component is="home-view"&gt;
          &lt;div id="slideshow" v-component="slider" inline-template&gt;
              &lt;slider&gt;
                  &lt;slide index="1" text="Slide #1"&gt;&lt;/slide&gt;
                  &lt;slide index="2" text="Slide #2"&gt;&lt;/slide&gt;
              &lt;/slider&gt;
          &lt;/div&gt;
  
          &lt;p&gt;More content specific to the homepage here.&lt;/p&gt;
      &lt;/component&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I might be overthinking this, but thank you for any help/ideas!</p>