VueJS - Swap component on click
<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>