title: Idle timer within Vue Component
body: <p>I am have some issues resetting my timer when no longer idle.  I am using <code>Vue Idle</code> for this, which is a wrapper for <code>idle.js</code>.</p>
  
  <p>So I have a modal with the id timeout-modal.  When Vue Idle triggers the idle function, I call <code>showWarningMessage</code>.</p>
  
  <p>Within this function, I first display my modal.  I then create a timer which my modal uses to do a countdown.  So this all works fine.</p>
  
  <pre><code>&lt;script&gt;
      export default {
          data() {
              return {
                  timerId: 0,
                  remainingTimeoutSeconds: 10000
              }
          },
          computed: {
              second() {
                  return this.remainingTimeoutSeconds / 1000;
              }
          },
          onIdle () {
              this.showWarningMessage();
          },
          methods: {
              showWarningMessage() {
                  this.$bvModal.show('timeout-modal');
                  this.warning = true;
  
                   this.timerId = setInterval(() =&gt; {
                      this.remainingTimeoutSeconds -= 1000;
                  }, 1000);
              },
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>Now within the modal there is a continue button.  When pressed, it should basically reset the above timer.  At the moment I have</p>
  
  <pre><code>handleContinueButtonClick(response) {
      if (response.data.success) {
          console.log("IN")
          this.$bvModal.hide('app-timeout-reminder-modal');
          clearInterval(this.timerId);
          return;
      }
  }
  </code></pre>
  
  <p>So what this should do is hide the modal, and then reset the timer back to 10 seconds.  It is entering the above as the console is printing <code>IN</code>.  The modal is also
  hidden when I click OK.</p>
  
  <p>However, the next time the modal is displayed, the timer is already near 0 as it did not reset back to 10.</p>
  
  <p>Is there any reason why I cant get this back to 10 seconds?  I thought <code>clearInterval</code> should reset the timer?</p>
  
  <p>Thanks</p>