title: Reusable nested VueJS components
body: <p>Is it possible to declare a component inside another component in Vue.JS?
  this is what i'm trying to do:</p>
  
  <pre class="lang-es6 prettyprint-override"><code>&lt;!-- this is declared inside some-component.vue file --&gt;
  &lt;script&gt; 
      export default {
          components:{
              'cmptest' : {
                  template:'#cmptest',
                  props:['mprop']
              }
          },
          data : () =&gt; ({
              val:'world'
          })
      };
  &lt;/script&gt;
  
  &lt;template&gt;
      &lt;div&gt;
          &lt;template id="cmptest"&gt;
              {{mprop}}
          &lt;/template&gt;
          &lt;cmptest mprop="hello"&gt;&lt;/cmptest&gt;
          &lt;cmptest :mprop="val"&gt;&lt;/cmptest&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>I'd like to avoid globally registering the child component if possible (with <code>Vue.component(...)</code>)</p>
  
  <p>In other words, I'd like to specify child's <code>&lt;template&gt;</code> inside the parent component file (without doing a huge line <code>template:'entire-html-of-child-component-here'</code>)</p>