title: Making load more function in Vue
body: <p>Trying to make a load more button, when user click it add 10 more item into the page. But the button code is not running smoothly... I still see all items in the page, and also there is no error in the console too.. of course button is not working.</p>
  
  <p>Additionally, trying to make it run with the filter function.. Thank you for any example, help.</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>data() {
          return {
              estates:[],
              moreEstates: [],
              moreEstFetched: false,
          }
  },
  
  mounted() {
          axios.get('/ajax').then((response) =&gt; {
              this.estates = response.data
              this.insertMarkers();
  
          });
  },
  
  methods: {
          handleButton: function () {
              if(!this.moreEstFetched){
                  axios.get('/ajax').then((response) =&gt; {
                      this.moreEstates = response.data;
                      this.estates = this.moreEstates.splice(0, 10);
                      this.moreEstFetched = true;
                  });
              }
              var nextEsts = this.moreEstFetched.splice(0, 10);
              
              this.estates.push(nextEsts);
          },
  },
  
  computed: {
          one: function () {
              let filteredStates = this.estates.filter((estate) =&gt; {
                  return (this.keyword.length === 0 || estate.address.includes(this.keyword)) &amp;&amp;
                  (this.rooms.length === 0 || this.rooms.includes(estate.rooms)) &amp;&amp;
                  (this.regions.length === 0 || this.regions.includes(estate.region))});
  
                  if(this.sortType == 'price') {
                      filteredStates = filteredStates.sort((prev, curr) =&gt; prev.price - curr.price);
                  }
                  if(this.sortType == 'created_at') {
                      filteredStates = filteredStates.sort((prev, curr) =&gt; Date.parse(curr.created_at) - Date.parse(prev.created_at));
                  }
  
                  filteredStates = filteredStates.filter((estate) =&gt; { return estate.price &lt;= this.slider.value});
                  filteredStates = filteredStates.filter((estate) =&gt; { return estate.extend &lt;= this.sliderX.value});
                  filteredStates = filteredStates.filter((estate) =&gt; { return estate.m2_price &lt;= this.sliderT.value});
  
                  return filteredStates;
          },
  },</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table class="table table-hover"&gt;
      &lt;thead&gt;
          &lt;tr style="background-color: #fff "&gt;
              &lt;th scope="col"&gt;イメージ&lt;/th&gt;
              &lt;th style="width:175px;"scope="col"&gt;物件名&lt;/th&gt;
              &lt;th style="width:175px;"scope="col"&gt;住所&lt;/th&gt;
              &lt;th scope="col"&gt;販売価格&lt;/th&gt;
              &lt;th scope="col"&gt;間取り&lt;/th&gt;
              &lt;th scope="col"&gt;専有面積&lt;/th&gt;
              &lt;th scope="col"&gt;坪単価&lt;/th&gt;
              &lt;th style="width:90px;" scope="col"&gt;物件詳細&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
    &lt;tbody&gt;
          &lt;tr　 v-for="estate in one"&gt;
              &lt;td&gt;&lt;img id="image" :src="estate.image" alt=""&gt;&lt;/td&gt;
              &lt;td&gt;{{estate.building_name}}&lt;/td&gt;
              &lt;td&gt;{{estate.address}}&lt;/td&gt;
              &lt;td&gt;{{priceSep(estate.price)}} 万円&lt;/td&gt;
              &lt;td&gt;{{estate.rooms}}&lt;/td&gt;
              &lt;td&gt;{{xtendSep(estate.extend)}} m²&lt;/td&gt;
              &lt;td&gt;{{estate.m2_price}}&lt;/td&gt;
              &lt;td&gt;&lt;a :href="/pages/+estate.id"&gt;物件詳細&lt;/a&gt;&lt;/td&gt;
          &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;button class="btn btn-primary loadmorebutton" @click="handleButton"&gt;Load more&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>