[kangoo1707]

If you mix server-side rendered apps with Vue, this is the most common way. Second method is to push the data to a window.__data.staffMemberOptions = "{{ foo }}" and use it in Vue.

[pbowyer]

Thanks, good to hear. Elsewhere I've added something similar, and populate the data this way:

    var vue = new Vue({
        el: '#app',
        created: function () {
            for (var key in __app.dataForVue) {
                this[key] = __app.dataForVue[key];
            }
        },
        // ...
    };

[mkopinsky]

Or as another approach:

    <!-- inventory.html.twig: -->
    <div
        id="app"
        data-inventory="{{ inventory | json_encode }}"
        >
    </div>

    // main.js
    new Vue({
        template: '<App :inventory="inventory"/>',
        components: {App},

        data() {
            return {
                inventory: null
            }
        },
    
        beforeMount: function () {
            this.inventory = JSON.parse(this.$el.attributes['data-inventory'].value);
        }
    }).$mount('#app');