title: Loads more content after scrolling through old one using Vue and Axios?
body: <p>So far I have something like this:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div class='sights-list'&gt;
          &lt;div v-for='(sight, index) in sights'&gt;
              &lt;p&gt;{{ sight.name }}&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import axios from 'axios'
  
  export default {
      data: function() {
          return {
              sights: []
          }
      },
      methods: {
  
      },
      mounted(){
          axios.get('/getSights/' + lat + '/' + lng + '/' + type)
              .then(response =&gt; {
                  this.sights = response.data.result.results
          }).catch((error) =&gt; console.log(error));
      }
  }
  </code></pre>
  
  <p>Now what I am trying to do is make another axios GET request when the user has scrolled past all the content that was generated from the GET request which was executed when the component was mounted.</p>
  
  <p>Essentially, I'm not sure how to determine if the user has scrolled through the old content and reached the bottom of it. Any tips how to do that?</p>