it doesn't return proper result to the loop (v-for)

[robertnicjoo]

Version

^2.4.4

Vue.js version

^2.5.17

Reproduction Link

https://jsfiddle.net/robertnicjoo/qdot0gyb/4/

Steps to reproduce

html

<div class="col-md-3 mb-3" v-for="product in products" :key="product.slug" :offset="1">
.. get name, image, etc.
</div>

<infinite-loading
  slot="append"
  @infinite="infiniteHandler"
  spinner="waveDots"
  @distance="1"
  force-use-infinite-wrapper=".el-table__body-wrapper">
</infinite-loading>

script

export default {
    props:['currency', 'user'],
    name: "home",
    data() {
        return {
            page: 1,
            showModal: false,
            products: [],
            currentItem: {},
        }
    },
    methods: {
        infiniteHandler($state) {
            console.log('page', this.page);
            axios.get('/api/products?page='+this.page)
            .then(({ data }) => {
                console.log('My page data', data)
                if (data.data.length > 0) {
                    this.page += 1;
                    this.products.push(data.data);
                    $state.loaded();
                } else {
                    $state.complete();
                }
            });

            console.log('LOADING')
        },
        setCurrentItem: function(item) {
            this.currentItem = item
        },
    }
}

screenshot

What is Expected?

showing all my data with correct values instead of undefined, etc.

What is actually happening?

not showing all my data with correct values.

[robertnicjoo]

no one has any idea here? :/

[BuGuru]

code ngawur..

 this.products.push(...data.data);

or

 this.products.push.apply(this.products, data.data);

not

 this.products.push(data.data);

[robertnicjoo]

@BuGuru thank you this.products.push(...data.data); works.