title: What is the difference between `el` and `template` in vue component and app?
body: <p>A VUE component (and the app itself) have an <code>el:</code> and also a <code>template</code>. </p>
  
  <p>I want to understand what the difference is, when do I use one and when the other: </p>
  
  <p>If I create a project with Monaca CLI from the minimal VUE-OnsenUI template I see:</p>
  
  <pre><code>new Vue({
    el: '#app',
    template: '&lt;app&gt;&lt;/app&gt;',
    components: { App }
  });
  </code></pre>
  
  <p>From the very verbose documentation lacking examples, to make a long story short, I gather that the <code>template</code> dom element and everything in it will replace the <code>el</code> dom element. (The template can only have a single root, right?). For example : If my html is: </p>
  
  <pre><code>&lt;html&gt;...
    &lt;body&gt;...
      &lt;replaceThis&gt;&lt;/replaceThis&gt;... 
  </code></pre>
  
  <p>and my vue js says: </p>
  
  <pre><code>el: "replace-this", 
  template: "&lt;div id='replaced'&gt;hi there&lt;/div&gt;" 
  </code></pre>
  
  <p>Then I will get : </p>
  
  <pre><code>&lt;html&gt;...&lt;body&gt;...&lt;div id='replaced'&gt;hi there&lt;/div&gt;... 
  </code></pre>
  
  <p>but I can also write: </p>
  
  <pre><code>el: "#bla", 
  template: "#blu" 
  </code></pre>
  
  <p>Then if my html is </p>
  
  <pre><code>&lt;html&gt;
    &lt;body&gt;
      &lt;div id="bla"&gt;
         anything inside here including the surrounding div will be replaced 
      &lt;/div&gt;
      &lt;template id="blu"&gt;
         &lt;span id ="replacing-html"&gt;
             when ran in span, it stays mainly in the pan
         &lt;/span&gt; 
      &lt;/template&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>then the div with id <code>bla</code> will be replaced with the <code>replacing-html</code> span elelment that is inside the <code>template</code>. (the template tag itself with everything in it will still remain in the emitted html. correct?) </p>
  
  <p>So I need to understand: </p>
  
  <ol>
  <li>Is the <code>template</code> content replacing the <code>el</code> element?</li>
  <li>Must the <code>template</code> only have a single root element directly under it? </li>
  <li>Am I correct with my first example?</li>
  <li>Am I correct about the second example?</li>
  <li>Will the <code>template</code> tag with everything in it remain in the emitted html? </li>
  <li>What happens in the case of the Monaca Vue-OnsenUI example above where the <code>el</code> is the same as the template: "app". Isn't this recursive? What is replaced and with what? </li>
  </ol>