Vue.js – Scroll isnt detected

I am completely new to Vue and trying to make the navbar and topbar disappear when the user is scrolling down. For some reason, it does not detect the scroll. Any help would be really appreciated.
Here is my NavBar.vue component:

<template>
<!-- --------------------------------- -->
<!-- Header -->
<!-- --------------------------------- -->

  <header class="header" :class="{ 'header-hidden': scrolled }" data-header>
    <div class="container">

      <a href="index.html" class="logo">
        <img src="../assets/images/Logo-1.png" width="160" height="50" alt="St.James  - Home">
      </a>

      <nav class="navbar" data-navbar>

        <button class="close-btn" aria-label="close menu" data-nav-toggler>
          <ion-icon name="close-outline" aria-hidden="true"></ion-icon>
        </button>

        <a href="index.html" class="logo">
          <img src="../assets/images/Logo-1.png" width="160" height="50" alt="St.James - Home">
        </a>

        <ul class="navbar-list">

          <li class="navbar-item">
            <a href="index.html" class="navbar-link hover-underline active">
              <div class="separator"></div>

              <span class="span">Home</span>
            </a>
          </li>

          <li class="navbar-item">
            <a href="menu.html" class="navbar-link hover-underline">
              <div class="separator"></div>

              <span class="span">Menus</span>
            </a>
          </li>

          <li class="navbar-item">
            <a href="about.html" class="navbar-link hover-underline">
              <div class="separator"></div>

              <span class="span">About Us</span>
            </a>
          </li>

          <li class="navbar-item">
            <a href="careers.html" class="navbar-link hover-underline">
              <div class="separator"></div>

              <span class="span">Careers</span>
            </a>
          </li>

          <li class="navbar-item">
            <a href="contact.html" class="navbar-link hover-underline">
              <div class="separator"></div>

              <span class="span">Contact</span>
            </a>
          </li>

        </ul>

        <div class="text-center">
          <p class="headline-1 navbar-title">Visit Us</p>

          <address class="body-4">
            1145 W Jackson St <br>
            Thomasville 31792, GA
          </address>

          <p class="body-4 navbar-text">Open: 9.30 am - 2.30 pm</p>

          <a href="mailto:[email protected]" class="body-4 sidebar-link">[email protected]</a>

          <div class="separator"></div>

          <p class="contact-label">Booking Request</p>

          <a href="tel:229-584-1970" class="body-1 contact-number hover-underline">
            229-584-1970
          </a>
        </div>

      </nav>

      <a href="contact.html" class="btn btn-secondary">
        <span class="text text-1">Find A Table</span>

        <span class="text text-2" aria-hidden="true">Find A Table</span>
      </a>

      <button class="nav-open-btn" aria-label="open menu" data-nav-toggler>
        <span class="line line-1"></span>
        <span class="line line-2"></span>
        <span class="line line-3"></span>
      </button>

      <div class="overlay" data-nav-toggler data-overlay></div>

    </div>
  </header>

</template>





<script>
export default {
  name: 'NavBar',
  props: {
    msg: String
  },
  data() {
    return {
      scrolled: false
    };
  },
  mounted() {
    // Add event listener for scroll event
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeUnmount() {
    // Remove event listener for scroll event
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      // Calculate the scroll position
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

      // Check if the user has scrolled past a certain point (e.g., 100px)
      this.scrolled = scrollTop > 100; // Adjust the value as needed
    }
  }
};

</script>





<style lang="css">

/* Importing an external CSS file */
@import '../assets/css/style.css';

/* Additional style for the hidden header */
.header-hidden {
  transform: translateY(-100%);
  transition: transform 0.3s ease;
  background-color: red; /* Add a background color for visibility */
}

.header-hidden .navbar {
  /* Additional styling for the navbar when header is hidden */
}


</style>

I was expecting it to scroll and the navbar hide when done so but when I scroll , nothing seems to happen.