requestPointerLock（）无法在Vue.js组件内部工作

Question

我正在尝试在Vue.js组件中使用requestPointerLock()。如果我的组件的pointerShouldLock数据项为true，则指针应在beforeUpdate()生命周期挂钩期间锁定。我的代码如下所示：

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

requestPointerLock()函数如下所示：

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

这种技术适用于React或vanilla JS，但是在使用Vue.js时，指针不会被锁定。相反，会触发pointerlockerror事件。

我也尝试过使用updated()生命周期钩子，但这也行不通。

有人知道为什么不能从Vue.js组件内成功请求指针锁定吗？