title: Using Vue to count up by seconds
body: <p>I'm creating a small timer Vue component. A user needs to be able to start and stop that timer. Here's my component thus far:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;a class="u-link-white" href="#" @click="toggleTimer"&gt;
              {{ time }}
          &lt;/a&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          props: ['order'],
          data() {
              return {
                  time: this.order.time_to_complete,
                  isRunning: false,
              }
          },
          methods: {
              toggleTimer() {
                  var interval = setInterval(this.incrementTime, 1000);
                  if (this.isRunning) {
                      //debugger
                      clearInterval(interval);
                      console.log('timer stops');
                  } else {
                      console.log('timer starts');
                  }
                  this.isRunning = (this.isRunning ? false : true);
              },
              incrementTime() {
                  this.time = parseInt(this.time) + 1;
              },
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>I'm toggling the <code>isRunning</code> variable to determine whether the timer is running or not. On first click (the play), the timer begins and increments successfully. </p>
  
  <p>However, on the second click (the pause), the <code>isRunning</code> var toggles back to off, but <code>clearInterval(this.incrementTime)</code> is not clearing the interval and pausing the timer. When I insert that debugger, and manually hit <code>clearInterval(interval)</code> via the console, it returns undefined.</p>
  
  <p>Does anybody have any insight on how I've formatted my component incorrectly?</p>