title: How to remove an eventListener (window.removeEventListener) in Vue 2, when certain condition is met
body: <p>Code :-</p>
  <pre class="lang-js prettyprint-override"><code>&lt;template&gt;
  // html
  &lt;/template&gt;
  
  &lt;script&gt;
  import _ from &quot;lodash&quot;;
  
   data() {
      return {
        renderComponent: false,
      };
    },
   watch: {
  // when this property is true, want to stop calling scroll event with this.onScroll method
      renderComponent(val) {
        if(val === true) {
          console.log(&quot;////////I am removing you&quot;);
          window.removeEventListener('scroll', this.onScroll);
        }
      }
    },
   methods: {
      onScroll() {
        console.log(&quot;I am called////////&quot;);
        let similarTickerHeading = this.$refs.similarTicker;
        if(similarTickerHeading) {
         let margin = similarTickerHeading.getBoundingClientRect().top;
         let innerHeigth = window.innerHeight;
          console.log(&quot;Window Screen&quot;, innerHeigth);
          console.log(&quot;Component located&quot;, margin);
         
  // when this condition is true, I want to stop listening for the scroll event with this (onScroll method)
         if(margin - innerHeigth &lt; 850) {
            console.log(&quot;I should start loading the actual component&quot;);
            this.renderComponent = true;
            this.$vs.loading.close(&quot;#loader-example &gt; .con-vs-loading&quot;);
            // removing eventListener for scrolling with the onScroll Method
            window.removeEventListener('scroll', this.onScroll);
         }
        }
      }
    },
    mounted() {
      this.renderComponent = false;
       this.$vs.loading({
          container: &quot;#loader-example&quot;,
          type: &quot;point&quot;,
          scale: 0.8,
        });
  
      this.$nextTick(function() {
        window.addEventListener('scroll', _.throttle(this.onScroll,250));
        this.onScroll();
      })
    },
   beforeDestroy() {
      window.removeEventListener('scroll', this.onScroll);
    },
  &lt;/script&gt;
  
  </code></pre>
  <p>In the above code, I want to stop listening for the scroll event with <code>onScroll</code> method when  my <code>if</code> block in <code>onScroll</code> method becomes true. But, still, the <code>onScroll</code> method gets called whenever I scroll even though when I tried to remove the <code>eventListener</code>. I even created a watcher to remove the <code>eventListener</code>, yet the method keeps on getting called on scroll.</p>
  <p>How can I remove the scroll eventListener with <code>onScroll</code> method ?</p>
  <p><strong>UPDATE</strong> : If I remove throttling and cut out <code>_.throttle</code>, the scroll event does get removed. Due to the use of <code>_.throttle</code>, I cannot remove the scroll event listener.</p>