Push GET object to empty object inside data return

by

I have the following vue app:

new Vue({
    name: 'o365-edit-modal-wrapper',
    el: '#o365-modal-edit-wrapper',
    data: function() {
        return {
            list: {},
        }
    },
    created() {
        this.get_array_of_post_objects(this.list, 'applications');
    },
    methods: {
        get_array_of_post_objects(list, slug) {
            wp.api.loadPromise.done(function () {
                const Posts = wp.api.models.Post.extend({
                    url: wpApiSettings.root + 'fh/v1/menus/' + slug,
                });
                const all_posts = new Posts();
                all_posts.fetch().then(function(posts) {

                    console.log(posts.data);

                });
            });
        },
    },
});

console.log(posts.data) outputs the following items:
enter image description here

How would I assign that object to my empty list: {} so that in my template, I can pull it as this:

<button class="button" v-for="app in list.selected" :key="app.order">

All help will be appreciated! I keep getting an undefined item back each time I attempt to push the items.

55 thoughts on “Push GET object to empty object inside data return”