How do I swap content
<p>how can I swap content of a div with Vue.js? I think I lack general lifecycle knowledge. Here is what I´ve got so far. After all I need to swap between two Vue-instances and ´d like to use only one lightbox container for them.</p>

<p>Here is what I´ve got so far: <a href="http://jsbin.com/qokerah/edit?html,js,output" rel="nofollow">http://jsbin.com/qokerah/edit?html,js,output</a></p>

<p>HTML</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"&gt;&lt;/script&gt;

  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /&gt;  
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width"&gt;
  &lt;title&gt;JS Bin&lt;/title&gt;  
&lt;/head&gt;
&lt;body&gt;

  &lt;script type="x-template" id="foo-template"&gt;
    &lt;div class="text"&gt;{{ fooText }}&lt;/div&gt;
    &lt;div class="confirm" v-if="fooConfirm"&gt;confirmed&lt;/div&gt;
  &lt;/script&gt;

  &lt;script type="x-template" id="bar-template"&gt;
    &lt;div class="heading"&gt;{{ barHeading }}&lt;/div&gt;
    &lt;div class="info"&gt;{{ barInfo }}&lt;/div&gt;
  &lt;/script&gt;

  &lt;div class="foo"&gt;
    &lt;div class="btn btn-primary" v-on:click="swapLightboxContent"&gt;Open foo template&lt;/div&gt;
  &lt;/div&gt;

  &lt;div class="bar"&gt;
    &lt;div class="btn btn-primary" v-on:click="swapLightboxContent"&gt;Open bar template&lt;/div&gt;
  &lt;/div&gt;

  &lt;div class="lightbox"&gt;
    &lt;div class="lightbox-content"&gt;Show foo- or bar-template&lt;/div&gt;
  &lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>JS</p>

<pre><code>var foo = new Vue({
  el: '.foo',
  data: {
    fooText: 'text',
    fooConfirm: false
  },
  methods: {
    swapLightboxContent: function () {
      console.log('Show foo-template');
    }
  }
});

var bar = new Vue({
  el: '.bar',
  data: {
    barHeading: 'text',
    barInfo: 'text'
  },
  methods: {
    swapLightboxContent: function () {
      console.log('Show bar-template');
    }
  }
});
</code></pre>