How it works...

The way we implemented the timer is not particularly accurate for time tracking. Let's review the code:

this.timer = setInterval(() => {  this.remainingTime -= 1  if (this.remainingTime === 0) {    clearInterval(this.timer)  }}, 1000)

This means that we decrease the remaining time every second. The problem is that the setInterval function itself is not 100% accurate and may fire the function a bit before or after 1000 milliseconds, depending on the machine's computational load; this way, the margin of error can accumulate and become a considerable amount. A better approach would be to check the clock every time the function gets called and adjust for the error at each loop, though we won't cover that here.

Get Vue.js 2 Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.