title: Vue JS removeEventListener not working. Why?
body: <pre><code>const options = {
    offset: -50
  };
  
  export default {
    name: 'BarMenu',
    data() {
      return {
        scrollingDirection: '',
      }
    },
    computed: {
      cssClasses() {
        return {
          hidden: this.scrollingDirection === 'down'
        }
      }
    },
    mounted() {
      this.onScroll();
    },
    methods: {
      scrollToIngredients() {
        return this.$scrollTo(document.getElementById('ingredients-inside-content'), 600, options);
      },
      scrollToRecipes() {
        return this.$scrollTo(document.getElementById('similar-recipes'), 600, options);
      },
      scrollToComments() {
        return this.$scrollTo(document.getElementById('comments'), 600, options);
      },
      onScroll() {
        let lastScrollTop = 0;
  
        const handler = () =&gt; {
          let st = window.pageYOffset || document.documentElement.scrollTop;
          if (st &gt; lastScrollTop) {
            this.scrollingDirection = 'down';
          } else {
            this.scrollingDirection = 'up';
          }
          lastScrollTop = st &lt;= 0 ? 0 : st;
        };
  
        window.removeEventListener("scroll", handler, false);
        window.addEventListener("scroll", handler, false);
      }
    },
  }
  </code></pre>
  
  <p>This line is not working, why? <code>window.removeEventListener("scroll", handler, false);</code>
  I tried all approaches: arrow function, function declaration, etc. But that event listener is not removing at all.</p>