accessing `this` inside async functions in methods of vue.js

Question

I have a vue.js class method that needs to call on an async function using await:

methods: {
   playRecording(path) {
      return await this.getAudioUrl(path)
   }
}

This results in the following error:

Unexpected reserved word 'await'.

In order to fix this error, I re-wrote the code using async as such:

methods: {
    playRecording : async() => {
       console.log(this) // `this` evaluates to `undefined`
       var path = '/recordings/' + this.book
       return await this.getAudioUrl(path)
    }
}

While this does address the await error above, it results in a new error:

Cannot read properties of undefined (reading 'book')

this evaluates to undefined

How can I regain access to this inside a class method marked with async?

Answer 1

The calling method has to be defined as such:

async playRecording () {

This is incorrect:

playRecording : async() => {