Scroll Progress indicator in Vue

ScrollProgress.vue

<template lang="html">
  <div :style="progress"></div>
</template>

<script>
export default {
  name: 'ScrollProgress',
  data() {
    return {
      scrollY: 0,
      clientHeight: 1,
      innerHeight: 0
    }
  },
  computed: {
    offset() {
      return this.clientHeight - this.innerHeight
    },
    calculatedWidth() {
      return (this.scrollY / this.offset) * 100
    },
    progress() {
      return `width: ${this.calculatedWidth}%`
    }
  },
  mounted() {
    this.handleScroll()
    window.addEventListener('scroll', this.handleScroll)
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll() {
      this.innerHeight = window.innerHeight
      this.clientHeight = document.body.clientHeight
      this.scrollY = window.scrollY
    }
  },
}
</script>

<style lang="css" scoped>
div {
  position: fixed;
  top: 0;
  left: 0;
  height: 0.125rem;
  background-color: #0071e4;
}
</style>