title: Vue infinite doesn't load data properly
body: <p>I am trying to get my data with <a href="https://peachscript.github.io/vue-infinite-loading/" rel="nofollow noreferrer">Vue-infinite-loading</a> but it doest return data properly</p>
  
  <h1>Code</h1>
  
  <p><code>Component html</code></p>
  
  <pre><code>&lt;div class="col-md-3 mb-3" v-for="product in products" :key="product.slug" :offset="1"&gt;
  .. get name, image, etc.
  &lt;/div&gt;
  
  &lt;infinite-loading
    slot="append"
    @infinite="infiniteHandler"
    spinner="waveDots"
    @distance="1"
    force-use-infinite-wrapper=".el-table__body-wrapper"&gt;
  &lt;/infinite-loading&gt;
  </code></pre>
  
  <p><code>component script</code></p>
  
  <pre><code>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 }) =&gt; {
                  console.log('My page data', data)
                  if (data.data.length &gt; 0) {
                      this.page += 1;
                      this.products.push(data.data);
                      $state.loaded();
                  } else {
                      $state.complete();
                  }
              });
  
              console.log('LOADING')
          },
          setCurrentItem: function(item) {
              this.currentItem = item
          },
      }
  }
  </code></pre>
  
  <h1>Screenshot</h1>
  
  <p><a href="https://i.stack.imgur.com/mh8UC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mh8UC.png" alt="one"></a></p>
  
  <p><strong>Any idea what cause that issue?</strong></p>
  
  <h1>Update</h1>
  
  <p><a href="https://jsfiddle.net/robertnicjoo/qdot0gyb/4/" rel="nofollow noreferrer">Demo</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>new Vue({
    el: "#app",
    props:['currency', 'user'],
      name: "home",
      data() {
          return {
              page: 1,
              showModal: false,
              products: [
                {
                  name: "p1"
                },
                {
                  name: "p2"
                },
                {
                  name: "p3"
                }
              ],
              currentItem: {},
          }
      },
      methods: {
          infiniteHandler($state) {
              console.log('page', this.page);
              axios.get('http://www.mocky.io/v2/5e4baed83100005700d8b6fe?page='+this.page)
              .then(({ data }) =&gt; {
                  console.log('My page data', data)
                  if (data.data.length &gt; 0) {
                      this.page += 1;
                      this.products.push(data.data);
                      $state.loaded();
                  } else {
                      $state.complete();
                  }
              });
  
              console.log('LOADING')
          },
          setCurrentItem: function(item) {
              this.currentItem = item
          },
      }
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/vue-infinite-loading@2.4.4/dist/vue-infinite-loading.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"&gt;&lt;/script&gt;
  
  
  &lt;div id="app"&gt;
    &lt;div class="col-md-3 mb-3" v-for="product in products" :key="product.slug" :offset="1"&gt;
      {{product.name}}
    &lt;/div&gt;
  
    &lt;infinite-loading slot="append" @infinite="infiniteHandler" spinner="waveDots" @distance="1" force-use-infinite-wrapper=".el-table__body-wrapper"&gt;
    &lt;/infinite-loading&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>