Как использовать HTML-сенсор API в Vue

Question

Я пытаюсь использовать html senor api как «акселерометр» в моей мобильной сети, В чистом HTML Env это работает, но в Vue это не удалось.

Я использую этот пример кода может работать на чистом HTML https://developer.mozilla.org/en-US/docs/Web/API/Sensor_APIs

И включить Chrome Flag Senor: Хром: / флаги / Разрешает-родовой-сенсор-экстра-класс

В HTML я использую это

let accelerometer = null;
try {
    accelerometer = new Accelerometer({ referenceFrame: 'device' });
    accelerometer.addEventListener('error', event => {
        // Handle runtime errors.
        if (event.error.name === 'NotAllowedError') {
            // Branch to code for requesting permission.
        } else if (event.error.name === 'NotReadableError' ) {
            console.log('Cannot connect to the sensor.');
        }
    });
    accelerometer.addEventListener('reading', () => reloadOnShake(accelerometer));
    accelerometer.start();
} catch (error) {
    // Handle construction errors.
    if (error.name === 'SecurityError') {
        // See the note above about feature policy.
        console.log('Sensor construction was blocked by a feature policy.');
    } else if (error.name === 'ReferenceError') {
        console.log('Sensor is not supported by the User Agent.');
    } else {
        throw error;
    }
}

Но в Vue у меня есть такая ошибка

Sensor is not supported by the User Agent.

А если просто объявить: let accelerometer = new Accelerometer (), получится ошибка, подобная этой

Uncaught (in promise) ReferenceError: Accelerometer is not defined
    at eval

Как узнать значение акселерометра в Vue env.