Detect scrolling to the bottom of a div in Vue.js

DetectScroll.vue

<template>
  <div class="wrapper">
    <div class="box" @scroll="handleScroll">
      <p>Your content here...</p>
    </div>
    <a href="#" v-if="hasScrolledToBottom">Show After Scrolling</a>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        hasScrolledToBottom: false
      }
    },
    methods: {
      handleScroll: function(el) {
        if((el.target.offsetHeight + el.target.scrollTop) >= el.target.scrollHeight) {
          this.hasScrolledToBottom = true;
        }
      }
    }
  }
</script>