Bagaimana cara menghidrasi Vue.js dengan konten yang dirender di sisi server dari CMS?

Katakanlah, inilah situasinya:

• konten dikelola melalui CMS "klasik" seperti WordPress atau TYPO3
• konten dikirimkan oleh CMS sebagai HTML dan CSS yang dirender sepenuhnya

Di Frontend Vue.js harus digunakan untuk semua interaksi dengan UI.

Meskipun saya membaca sebagian besar dokumentasi vue dan juga halaman Panduan Rendering Sisi Server Vue.js sebagai serta Penggunaan di Lingkungan non-Node.js, saya masih belum yakin bagaimana membuat ini berhasil.

Contoh^*

Halaman tersebut memiliki komponen yang pada dasarnya adalah daftar produk. Untuk semua orang yang menggunakan JavaScript, daftar ini memiliki filter di bagian atas.

Sekarang, dari CMS saya mendapatkan daftar lengkap yang dirender, seperti:

<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>

Setelah JavaScript dijalankan, tampilannya akan seperti ini:

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

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

Komponen di Vue.js bisa seperti ini:

<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,
  }
});

Sekarang pertanyaan saya adalah:

• Bagaimana cara menghubungkan Vue.js ke Templat yang sudah dipra-render?
• 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?
• Karena daftar dan bagian-bagian templat sudah dirender, haruskah Vue.js merender ulang setelah inisialisasi?
• Bagaimana hal ini direpresentasikan dalam Siklus Hidup Vue.js?

Yang terakhir: Apakah penyiapan ini mungkin dilakukan?

_{^* Kode ini hanyalah kodesemu untuk menggambarkan masalahnya.}