title: How to reset a vue-infinite-loading element?
body: <p>I have a list of Exhibits. The user can add exhibits. When the user adds exhibits, <code>vue-infinite-loading</code> does not pick up the change in the number of exhibits, so it says "End of List" even though there are more to show. </p>
  
  <p>Here's a <a href="https://codepen.io/anon/pen/KbREyG" rel="nofollow noreferrer"><strong>Code Pen</strong></a>. <em>Note: I can't get vue-infinite-loading working in a sandbox, but it is definitely working on my site.</em></p>
  
  <p>Here's the code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="app"&gt;
    &lt;button @click="addTenRows()"&gt;Add 10 Rows&lt;/button&gt;
    &lt;table cellpadding="10"&gt;
      &lt;tr&gt;&lt;th&gt;id&lt;/th&gt;&lt;th&gt;Name&lt;/th&gt;&lt;th&gt;Description&lt;/th&gt;&lt;/tr&gt;
      &lt;tr v-for="exhibit in exhibits.resultsMap"&gt;
        &lt;td&gt;{{exhibit.id}}&lt;/td&gt;
        &lt;td&gt;{{exhibit.name}}&lt;/td&gt;
        &lt;td&gt;{{exhibit.desc}}&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
    &lt;infinite-loading 
        :distance="10" 
        @infinite="loadMore" 
        ref="infiniteLoading" 
        identifier="exhibitLoader"&gt;
        &lt;span slot="no-more"&gt;
          &lt;h5&gt;
            &lt;i class="fa fa-check-circle"&gt;&lt;/i&gt; End of Results
            &lt;span v-if="exhibits.results"&gt;
                : &lt;strong&gt;{{exhibits.meta.totalRecords}} shown&lt;/strong&gt;
            &lt;/span&gt;
          &lt;/h5&gt;
        &lt;/span&gt;
    &lt;/infinite-loading&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS: </p>
  
  <pre><code>new Vue({
    el: '#app',
    methods: {
      addTenRows(){
        this.exhibits.meta.totalRecords += 5;
      },
      loadMore(){
        this.exhibits.results.push('16');
        this.exhibits.results.push('17');
        this.exhibits.results.push('18');
        this.exhibits.results.push('19');
        this.exhibits.results.push('20');
  
        this.exhibits.resultsMap[ '16' ] = { 'id':'16', 'name': 'STR-16', desc: 'Exhibit number 16' };
        this.exhibits.resultsMap[ '17' ] = { 'id':'17', 'name': 'STR-17', desc: 'Exhibit number 17' };
        this.exhibits.resultsMap[ '18' ] = { 'id':'18', 'name': 'STR-18', desc: 'Exhibit number 18' };
        this.exhibits.resultsMap[ '19' ] = { 'id':'19', 'name': 'STR-19', desc: 'Exhibit number 19' };
        this.exhibits.resultsMap[ '20' ] = { 'id':'20', 'name': 'STR-20', desc: 'Exhibit number 20' };
      }
    },
    data: {
      exhibits: {
        meta: {
          totalRecords: 25
        },
        results: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15'],
        resultsMap:{
          '1':{ id: 1, name: 'STR-01', desc: 'some exhibit' },
          '2':{ id: 2, name: 'THR-20', desc: 'another exhibit' },
          '3':{ id: 3, name: 'STR-02', desc: 'a third' },
          '4':{ id: 4, name: 'THR-21', desc: 'This is the fourth Exhibit' },
          '5':{ id: 5, name: 'STR-03', desc: 'Number 5' },
          '6':{ id: 6, name: 'THR-22', desc: 'Up Up Down Down' },
          '7':{ id: 7, name: 'STR-04', desc: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ultrices ' },
          '8':{ id: 8, name: 'THR-23', desc: 'Praesent augue tellus, aliquet sit amet tellus in' },
          '9':{ id: 9, name: 'STR-05', desc: 'Cras eget augue tellus.' },
          '10':{ id: 10, name: 'THR-24', desc: 'Nunc facilisis elit at efficitur ullamcorper.' },
          '11':{ id: 11, name: 'STR-06', desc: 'In vel turpis ex. Curabitur mollis ac sapien eget aliquet' },
          '12':{ id: 12, name: 'THR-25', desc: 'Morbi eget lacus eu mi tincidunt scelerisque ac sed metus' },
          '13':{ id: 13, name: 'STR-07', desc: 'Donec consequat est maximus, venenatis velit a, vehicula felis' },
          '14':{ id: 14, name: 'THR-26', desc: 'Mauris orci neque, ullamcorper non blandit non' },
          '15':{ id: 15, name: 'STR-08', desc: 'Vivamus efficitur erat vel consectetur sagittis' }
        }
      }
    }
  });
  </code></pre>
  
  <p>In the Example above here's what happens:</p>
  
  <ol>
  <li>The page loads, 15 records are displayed</li>
  <li>The user clicks the "Add 10 records" button</li>
  <li><code>exhibits.meta.totalRecords</code> is increased by 10
  
  <ul>
  <li>This <em>SHOULD</em> tell infinite-loader to refresh</li>
  </ul></li>
  <li>The user scrolls down to within 10px of the bottom, and infinite-loading shows a spinner while loadMore adds 10 rows to <code>exhibits.results</code> and <code>exhibits.resultsMap</code></li>
  </ol>
  
  <h2>Things I've tried:</h2>
  
  <ul>
  <li>forcing a reset:
  
  <ul>
  <li>in <code>addTenRows</code>, after I add ten to <code>meta.totalRecords</code></li>
  <li><code>this.$refs.infiniteLoading.stateChanger.reset();</code> - nothing changes</li>
  <li><code>this.$refs.exhibitLoader.stateChanger.reset();</code> - error, <code>exhibitLoader</code> is undefined.</li>
  <li><code>this.exhibitLoader.stateChanger.reset();</code> - errors, <code>exhibitLoader</code> is undefined.</li>
  </ul></li>
  </ul>