Компиляция шаблона с несколькими компонентами Vue.js

Question

Я работаю с устаревшим приложением.По запросам XHR сервер предоставляет некоторый HTML, содержащий несколько компонентов Vue.Я пытаюсь скомпилировать компоненты Vue и отобразить HTML на исходной странице.Это прекрасно работает, когда возвращаемый HTML содержит только один компонент Vue, но не работает, если он содержит несколько компонентов.

Вот JS Fiddle, чтобы проиллюстрировать проблему: https://jsfiddle.net/o8vfsepj/4/

код Vue:

var myCounter = {
    data: function() { return { count: 0 } },
  methods: {
    increment: function() {
      this.count = this.count + 1;
    }
  }

};

new Vue({
  el: "#app",
  data: {
    loadedItem: '',
    rawHtml: '',
  },
  methods: {
    loadItems: function() {
        // XHR request sends back some html containing vue components:
      this.rawHtml = '<div><h4>First counter</h4><component-counter><button type="button" v-on:click="increment">increment</button> {{ count }}</component-counter></div><div><h4>Second counter</h4><component-counter><button type="button" v-on:click="increment">increment</button> {{ count }}</component-counter></div>';

      let compiledHtml = Vue.compile(this.rawHtml);
      let methods = myCounter.methods;
      let data = myCounter.data;
      let component = Object.assign({}, compiledHtml, { methods }, { data });

      this.loadedItem = component;

    }
  },
  components: {
    'component-counter': myCounter,
  }
});

и исходная страница с кнопкой для запуска внутреннего запросаи динамический компонент Vue для отображения результата:

<div id="app">
  <div>
    <button v-on:click="loadItems">load items from "backend"</button>
  </div>
  <div>
    <component :is="loadedItem"></component>
  </div>
</div>

rawHtml содержит два счетчика;после компиляции и добавления методов и данных и отображения результирующего объекта на странице первый счетчик отображается и работает должным образом, а второй - нет.

Когда серверная часть отправляет обратно HTML-код, аккуратно обрезанныйв массиве JSON, так что каждый компонент уже изолирован, к сожалению, это не вариант, так как разметка намного больше, чем в примере, и неправильно закрытые теги и т. д. портятся при компиляции.

(I 'я осознаю, что это очень неправильный способ делать вещи с помощью Vue)