Vue Await for Watch

Certainly, it doesn’t make much sense to make your watchers async because the data you need to process has already arrived.

However, you can still call other async functions within the watcher. Async functions are simply functions that return a promise. Therefore, you can use the .then() method to execute some actions once the promise is resolved, like this:

someRandomValue(newValue, oldValue) { 
    triggerAsyncAction()
        .then(response => this.randomAction)
        .catch(error => console.log(error))
}

But instead of doing your async tasks within the watcher, performing them in the “randomAction” method might be better. You can call this method inside the watcher and execute the async tasks there.

watch:{ 
    someRandomValue(newValue, oldValue) { 
        this.randomAction()
    }
},
methods:{
    async randomAction(){
        await doSomeAsyncStuff() // use await here
        // then do something else
    }
}