title: Vue - infinite scroll doesn't fetch new data when bottom of the page is reached
body: <p>So, I made a method <code>fetchStories</code> that fetches stories from my API in batches of 10, and the new stories can be fetched once you've scrolled to the bottom of the screen. This is what part of my Vue instance looks like:</p>
  
  <pre><code>var discoveryFeed = new Vue({ // eslint-disable-line no-unused-vars
    el: '#discoveryFeed',
    data: {
      userId: userId,
      username: username,
      tags: [],
      selectedTag: null,
      stories: [],
      checklist: [],
      limit: 10,
      page: 1,
      isEnd: false,
      busy: false,
      isFollowing: true
    },
    beforeMount: function() {
      var self = this;
      self.$http.get('/api/tags')
        .then(function(res) {
          self.tags = res.body;
        }, function(err) {
          self.tags = [];
        });
      self.$http.get('/api/user/' + self.username + '/checklist')
        .then(function(res) {
          self.checklist = res.body || [];
        }, function(err) {
          self.checklist = [];
        });
      self.fetchStories();
    },
    methods: {
      fetchStories: function(isNew) {
        var self = this;
        isNew = Boolean(isNew);
        if(self.isEnd) { return; }
  
        self.busy = true;
        var url = '/api/discover';
        if(self.selectedTag) {
          url = `/api/tags/${self.selectedTag.code}/stories`;
        }
        url += '?p=' + self.page;
        url += '&amp;l=' + self.limit;
        self.page += 1;
        self.$http.get(url)
          .then(function(res) {
            self.busy = false;
            if(res.body.length === 0) {
              self.isEnd = true;
              return;
            }
            if(isNew) {
              self.stories = [];
            }
            self.stories = self.stories.concat(res.body);
          }, function(err) {
            self.busy = false;
            self.stories = [];
          });
      },
      setTag: function(tag) {
        var self = this;
        self.selectedTag = tag;
        for(var i = 0; i &lt; self.tags.length; i++) {
          self.tags[i].selected = false;
        }
        self.selectedTag.selected = true;
        self.page = 1;
        self.fetchStories(true);
      }
  </code></pre>
  
  <p>In my pug, I'm using the v-infinite-scroll directive to call the method <code>fetchStories</code>. Also note that I'm working with a list of tags, and clicking a new tag will load different sets of stories through the method <code>setTag(tag)</code>.</p>
  
  <pre><code>nav.col-lg-3.col-md-4.d-none.d-md-block.d-lg-block.bg-sidebar(v-cloak)
    .feed-sidebar.feed-sidebar-interests.border-top-0.border-bottom-0.border-left-0.position-sticky
      strong Your Interests
      div.list-group.list-unstyled.mt-2(v-if="tags.length &gt; 0")
        a.tag-btn.mb-2.align-middle.text-black(v-for="tag, index in tags" v-bind:class="{ active: selectedTag &amp;&amp; selectedTag.id === tag.id }" @click="setTag(tag); scrollToTop();")
          i.fa-fw.mr-2(v-bind:class="tag.icon + ' fa-lg'"
            v-bind:style="'color:' + tag.hexColor")
          span {{ tag.name }}
  
  .col-lg-6.col-md-8(v-cloak
      v-infinite-scroll="fetchStories"
      infinite-scroll-disabled="busy"
      infinite-scroll-distance="50")
  </code></pre>
  
  <p>Upon checking the data response at the initial load, the ten stories are fetched at <code>/stories?p=1&amp;l=10</code>. However, upon reaching the bottom the data response array of <code>/stories?p=2&amp;l=10</code> is empty. This may have something to do with my use of booleans to set flags when choosing a tag. </p>