title: How do I use a vue component without instantiating a root instance?
body: <h2>Details</h2>
  
  <p>I am working on a website with different page setups.</p>
  
  <p>My setup is <strong>not an SPA</strong> and so I do not have the privalige of one single root instance.</p>
  
  <h2>Problem</h2>
  
  <p>This means that if I create a component I have to register a root vue instance every time I want to use my component.</p>
  
  <h2>Example of the issue</h2>
  
  <p>I create my custom component as a global component:</p>
  
  <pre><code>Vue.component('mycomponent', { /* options */ });
  </code></pre>
  
  <p>According to the vue docs I have to register a root instance in order to use my component</p>
  
  <pre><code>new Vue({ el: '#root-instance' });
  
  &lt;div class="header" id="root-instance"&gt;
    &lt;mycomponent&gt;&lt;/mycomponent&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Then in a different section I want to use the same component but I have to create another root instance:</p>
  
  <pre><code>new Vue({ el: '#other-root-instance' });
  
  &lt;div class="sidebar" id="other-root-instance"&gt;
    &lt;mycomponent&gt;&lt;/mycomponent&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I tried using a class for instantiating, something like:</p>
  
  <pre><code>new Vue({ el: '.root-instance' });
  </code></pre>
  
  <p>But view only loads this once.</p>
  
  <h2>Question</h2>
  
  <p>Is there any way to load a component but not instantiate a root instance every time I use it?</p>
  
  <p><strong>Note:</strong> I have several root instances on the page and therefore can not declare a single root instance for the page. Effectively I do not want to make my page a Single Page App.</p>