title: Getting started with components, trying to nest them
body: <p>I am trying to nest two components in vuejs as I get started in it. I just don't want to jump into cli or webpack. So I wanted to do that without import/export. From the browser's console I get the warn:</p>
  
  <p>[Vue warn]: Error compiling template:</p>
  
  <p>Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.</p>
  
  <p>1  |  <p>This is the Component A</p>
     |                                ^^^^^^^^^^^^^^^^^^^^^^^^^^^</p>
  
  <p>found in</p>
  
  <p>---> 
         </p>
  
  <p>Tried a similar problem with answer here.
  <a href="https://stackoverflow.com/questions/36746204/vuejs-nested-components">VueJS nested components</a></p>
  
  <p>but it seems to be an old version of vuejs. I could not make it work that way.</p>
  
  <p>index.html:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  
  &lt;html lang="en" xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;script src="vue.js"&gt;&lt;/script&gt;
      &lt;meta charset="utf-8" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="app"&gt;
          &lt;component-a&gt;
          &lt;/component-a&gt;
      &lt;/div&gt;
      &lt;script src="app.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>app.js:</p>
  
  <pre><code>var ComponentB = {
      template: "&lt;p&gt;This is the Component B&lt;/p&gt;",
  }
  
  var ComponentA = {
      template: '&lt;p&gt;This is the Component A&lt;/p&gt;&lt;component-b&gt;&lt;/component-b&gt;',
      components: {
          'component-b': ComponentB
      }
  }
  
  new Vue({
      el: '#app',
      components: {
          'component-a': ComponentA,
      }
  });
  </code></pre>
  
  <p>Expected that template of component b show up inside the template of complement a.</p>