Vuejs v-if cache

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.min.js"></script>
<div id="app">
  <textarea name="test" id="textarea" cols="30" rows="10" v-model="content"></textarea>
  <hr>
  <button @click="insertMore">change content ...</button>  
  <button @click="toggleVifTruthy">toggle v-if truthy</button>  
  <preview :tpl="content" v-el:child v-if="displayme"></preview>
 
  <template id="markme">
   <div class="v-markme" @click="toggleselectme" :class="{'j-selected': selected}">
        <slot></slot>
    </div>
  </template>
</div>

CSS

.v-markme{
        display: inline-block;
        min-width: 2em;
        background-color: lavender;
        cursor: pointer;
        text-align: center;
    }
    .v-markme.j-selected{
  background-color: salmon;
}

JavaScript

Vue.component('markme',{
  template: '#markme',
  props: ['idx'],
        data: function(){
            return{
                selected: false
            }
        },
        methods: {
            toggleselectme: function(){
                this.selected = !this.selected;
            }
        }
})
Vue.component('preview',{
	  props: [ 'tpl' ],
    created(){
    this.$options.template = this.tpl;
    }
});
new Vue({
	el: '#app',
  data: {
  	content: '<div><markme>this can be marked</markme></div>',
    displayme: true
  },
  methods: {
  	insertMore: function(){
      this.content = this.content.replace(/(.*)(<\/div>)/,function(match,m1,m2){return m1+' here is a more markme component: <markme>markme again</markme>'+m2});
      console.log(this.$elements.get(1))
      this.$compile(this.$els.child);
    },
    toggleVifTruthy: function(){
    this.displayme = !this.displayme;
    }
  }
})