requestPointerLock() not working inside of Vue.js component

I am trying to use requestPointerLock() inside of a Vue.js component. If the pointerShouldLock data item of my component is true, the pointer should get locked during the beforeUpdate() lifecycle hook. My code looks like this:

beforeUpdate() {
    if (this.pointerShouldLock) {
        const gameScreen = document.getElementById('game-screen')
        requestPointerLock(gameScreen)
    }
}

The requestPointerLock() function looks like this:

requestPointerLock = element => {
    element.requestPointerLock =
        element.requestPointerLock || element.mozRequestPointerLock        
    element.requestPointerLock()
}

This technique works fine with React or vanilla JS, however when using Vue.js, the pointer does not get locked. Instead, a pointerlockerror event gets triggered.

I've also tried using the updated() lifecycle hook, but this also doesn't work.

Does anybody have an idea why it's not possible to successfully request the pointer lock from inside of a Vue.js component?

According to the specifications, requestPointerLock() can only be triggered by a valid engagement gesture (for example a click event). Requesting pointer lock programmatically without user interaction is not possible. See the specs for further information.