title: Vue.js destroy a setInterval running inside a component
body: <p>In my SPA made with VUE I have a component running a recursive few of setInterval functions (it's a countdown). I noticed the countdown continue in the background when I switch view to another component, but I prefer to destroy the setInterval.</p>
  <p>I tried using a global data having the countdowns and then destroy it on destroyed hook but it doesn't work.</p>
  <p>Here my code:</p>
  <pre><code>    data: function () {
          return {
              counters: &quot;&quot;
          }
      }),
  
     methods: {
       countdown(index, exp) {
          ...
            this.counters = setInterva()
          ...
          },
     },
  
     destroyed(){
          console.log(this.counters); // returns a progressive integer
          clearInterval(this.counters);
          console.log(this.counters); // returns same integer
          this.counters = 0;
          console.log(&quot;destroyed&quot;);
      } 
  </code></pre>
  <p>But in the console I got:</p>
  <blockquote>
  <p>destroyed</p>
  <p>app.js:64433 0</p>
  <p>app.js:64398 Missing counter_1 . &lt;--- which means counter is still running</p>
  </blockquote>
  <p>Thanks for any suggestion!</p>