Vuejs v-if cache

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.0-beta.6/vue.js"></script>
<div id="app">
  <textarea name="test" id="textarea" cols="30" rows="10" v-model="content"></textarea>
  <hr>
  
  <button @click="toggleVifTruthy">toggle v-if truthy</button>
  <preview :tpl="content" v-if="displayme"></preview>
</div>

<template id="markme">

    <slot></slot>
  </div>
</template>

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.config.debug = true


Vue.component('preview', {
  // functional: true,
  props: ['tpl'],
  render(h) {
    renderFunction = Vue.compile(this.tpl).render
    return h({ render: renderFunction })
  }
});
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
      });
    },
    toggleVifTruthy: function() {
      this.displayme = !this.displayme;
    }
  }
})