How to change font-size and color on scroll in vue .js

Am having some issue regarding changing some font-Size and color on scroll in vue. i want to change the color and size when a user scroll to the next text.. as seen in the image...ui Am not sure what am missing here...

<template>
  <div :class="scrolled === 'create' ? 'bolder' : ''">
    <h3>Create and issue expense cards.</h3>
    <p>Create and fund a physical or virtual card with a set budget for your team members.</p>
  </div>
  <br />
  <div :class="scrolled === 'expense' ? 'bolder' : ''">
    <h5 class="text-muted">Set expense budget.</h5>
    <p class="text-muted">Develop a budget for your team’s work-related trips and expenses</p>
  </div>
</template>

<script>
export default {
  data() {
    return { scrolled: 'create' };
  },
  methods: {
    handleScroll(e) {
      const elementSelected = this.$el.querySelector('.row-fill-01');
      if (elementSelected.scrollTop == 10) {
        this.scrolled = 'expense';
      } else if (elementSelected.scrollTop == 40) {
        this.scrolled = 'fleet';
        // console.log(elementSelected.scrollTop);
      }
    },
  },
};
</script>