title: VueJS - Swap component on click
body: <p>In my application I have many buttons. When I press it the button I would like to load a template (that replaces the selected button):</p>
  
  <p>Templates:</p>
  
  <pre><code>Vue.component('component-1', {...});
  Vue.component('component-2', {...});
  </code></pre>
  
  <p>Buttons:</p>
  
  <pre><code>&lt;div id="toReplace"&gt;
    &lt;button&gt;Button1&lt;/button&gt;
    &lt;button&gt;Button2&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In this case, when I press <code>Button1</code> the content of the div <code>toReplace</code> should be <code>component-1</code>. 
  Sure, each component should have a "close" button that will show the buttons again (in short, the div <code>toReplace</code>) on press.</p>