Как сделать рабочую реактивность Vue 3?

Question

[trenrnd]

Добрый день! Подскажите пожалуйста, как сделать так, чтобы реактивность работала?
После того, как асинхронный метод запишет данные в this.name, его значение в шаблоне не обновляется. Vue 3

<template>
    <div class="page">
        {{ name }}
    </div>
</template>
  
<script>
  import firebase from 'firebase/compat/app';
    export default {
        data() {
            return {
              name: "default"
            }    
        },
        methods: {
            async getData() {
                  const user = (await firebase.database().ref(`/users/1`).once('value')).val()
                  this.name = user.name;
            },
        },
        mounted() {
            this.getData();
        }  
    }
</script>

Comments

[Дмитрий Кузнецов]

От куда берётся uid?

[trenrnd]

Дмитрий Кузнецов, из другого метода, я вырезал лишний код, можно заменить на постоянный. А это важно?

const user = (await firebase.database().ref(`/users/1`).once('value')).val()

[Дмитрий Кузнецов]

trenrnd, нет, просто интересно было.

[iljaGolubev]

Должно работать... если (await).val() выполняется правильно
проверить:

...
alert(user.name);
this.name = user.name;

[trenrnd]

iljaGolubev, да, выполняется правильно, да и если через дебаггер смотреть, то this.name меняется, но не перерисовывается в шаблоне.
Во Vue 2 работает так, как написано, а во Vue 3 есть что-то, что я не учел и реактивность ломается.

[trenrnd]

iljaGolubev, причем я пробовал и через Composition API через ref, все равно не хочет

[iljaGolubev]

Тогда мало инфы и проблема не в приведённом коде
Vue SFC Playground

[trenrnd]

iljaGolubev, заменил запрос к АПИ на setInterval. Тут видимо нужно использовать Promise, чтобы затем через .then изменить this.name, но я с ними не сталкивался пока.Playground

[iljaGolubev]

user.name = "www"
поменять на
this.name = "www"

/* рекомендую переехать на composition - понятнее что ли как-то */

Answer 1

[trenrnd]

Всем спасибо за помощь и советы, в итоге повнимательнее почитал документацию firebase и понял, что метод once возвращает callback функцию после выполнения запроса. Там уже сделал присвоение this.name.