JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>

<div id="app">
  <div>
    color: <input v-model="blocks[1].data[0]">
  </div>
  <div>
    count: <input v-model.number="blocks[2].data" type="number" min="2" max="7">
  </div>
  <block-component v-for="n in blocks" v-bind="n"></block-component>
</div>

JavaScript

Vue.component('block-component', {
  props: [ 'template', 'data' ],
  computed: {
    compiled() {
      return Vue.compile(this.template);
    },
  },
  render() {
    return this.compiled.render.call(this);
  },
});

new Vue({
  el: '#app',
  data: () => ({
    blocks: [
      {
        template: '<div><ul><li v-for="n in data" v-html="n"></li></ul></div>',
        data: [
          '<h2>Заголовок 1</h2><p>какой-то текст 1</p>',
          '<h2>Заголовок 2</h2><p>какой-то текст 2</p>',
        ],
      },
      {
        template: '<div><h3 v-for="color in data" :style="{ color }">{{ color }}</h3></div>',
        data: [ 'red', 'green', 'blue' ],
      },
      {
        template: '<div><p v-for="i in data">{{ i }}</p></div>',
        data: 4,
      },
    ],
  }),
});