Как насытить Vue.js содержимым, отображаемым на стороне сервера из CMS?

Допустим, такая ситуация:

• контент управляется с помощью «классической» CMS, такой как WordPress или TYPO3.
• контент доставляется CMS как полностью обработанный HTML и CSS

Во внешнем интерфейсе для всех взаимодействий с пользовательским интерфейсом следует использовать Vue.js.

Хотя я прочитал большую часть документации vue, а также страницу Vue.js Server-Side Rendering Guide как а также Использование в средах, отличных от Node.js, я все еще не уверен, как заставить эту работу.

Пример ^*

На странице есть компонент, который по сути представляет собой список продуктов. Для всех с JavaScript этот список получает фильтр вверху.

Теперь из CMS я получаю полный отрисованный список, например:

<div class="product-component">
    <ul class="products">
        <li data-id="1">Product 1</li>
        <li data-id="2">Product 2</li>
        <li data-id="3">Product 3</li>
    </ul>
</div>

После запуска JavaScript он должен выглядеть так:

<div id="product-component">
    <form>
        <select>
            <option value="1">Show Product 1 only</option>
        </select   
    </form>

    <ul class="products"></ul>
</div>

Компонент в Vue.js может быть примерно таким:

<div id="product-component">
    <form>
        <!-- Vue.js logic for the filter -->
    </form>

    <ul class="products">
        <li v-for="product in products">
            {{ product.name }}
        </li>
    </ul>
</div>


var vm = new Vue({
  el: '#product-component',
  data: {
    products: [
        {id: 1, name: 'Product 1'},
        {id: 2, name: 'Product 2'},
        {id: 3, name: 'Product 3'},
    ],
    filterCurrent: null,
  }
});

Теперь мои вопросы:

• Как подключить Vue.js к предварительно отрендеренному шаблону?
• How to update/inject Vue.js variables (especially data) on runtime?
  • Which means: How can I get the list of products from the CMS into the component?
• Поскольку список и части шаблона уже отрисованы, должен ли Vue.js повторно визуализировать его после инициализации?
• Как это представлено в жизненном цикле Vue.js?

И последнее, но не менее важное: Возможно ли это настроить?

_{^* Код представляет собой псевдокод, иллюстрирующий проблему.}