Vue v-html & updated
HTML
<div id="app">
<t-markdown :src="inp"></t-markdown>
<button @click="change">change</button>
updated: {{count}}
</div>
<script type="text/x-template" id="t-markdown">
<div v-html="markup()"></div>
</script>
CSS
body {
background: #20262E;
padding: 20px;
font-family: sans-serif, Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
Vue
Vue.component('t-markdown', {
template: '#t-markdown',
props: {src:String},
methods: {
markup: function() { return this.src.slice(0,11) },
},
updated: function() { this.$parent.count++ },
});
new Vue({
el: "#app",
data: {count:0, inp:'<b>src</b> '},
methods: {
change: function() { this.inp += '#' },
},
})