'Vue countdown timer using watcher accelerates when modifying watched variable from method

very new to Vue and JS. I've setup a watcher for a timerCount variable (initially set to 5) which makes a 5 second timer. When the variable hits 0, some code is executed, and I reset the timer to 5 to restart it. This works perfectly fine, however, I have a click event which calls a method, which will execute different code and then reset the timer to 5 as well, but now my timer is accelerated (twice as fast).

From what I could find from googling, it seems that there are multiple watcher/timer instances running at the same time, which is what causes the speed up. How do I fix this so my method simply reset the timer like normal?

watch: {
    timerCount: {
        handler(value){
            //timer for 5 seconds
            if (value>0){
                setTimeout(() => {
                    this.timerCount--;
                }, 1000);
            }
            //if timer hits 0, execute code and reset timerCount to 5 seconds, this works fine
            else{
                /* Code */
                this.timerCount=5
            }
        },
        immediate: true,
    }
},

methods:{
    //this resets the timer, but it now goes twice as fast, don't know why.
    otherMethod(){
        /* Code */
        this.timerCount=5
    }

}

Any help?

Here is the post where I got this code: How do I create a simple 10 seconds countdown in Vue.js



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source