Jak przypisać do ref asynchroniczną wartość z gettera

Wewnątrz Vuex w pliku actions.js mam akcję, która pobiera dane z backendu, a następnie je ustawia:

    async loadData(context) {
        const response = await fetch(
            `http://localhost:9090/api/v1`, {
                headers: {
                    'Content-Type': 'application/json'
                }
            }
        );

        const responseData = await response.json();

        const data = {
            email: responseData.email
        };

        context.commit('setEmail', data);
    },

Teraz jak wewnątrz jakiegoś komponentu zrobię sobie takie coś:

const email = ref(store.getters.email)

żeby potem wyświetlić to w polu tekstowym:

 <input v-model="email"/>

to to pole tekstowe zawsze jest puste. To dlatego, że request trwa powiedzmy około 1 sekundę i zanim się skończy to komponent już dawno się wyrenderuje gdy store.getters.email jeszcze jest null. Przyczynę znam ale jak to obejść już nie mam pojęcia. Proszę o pomoc.

ref jest raczej używany do typów prymitywnych. W przypadku obiektów standardem jest reactive. No i pytanie w jaki sposób to przypisujesz. Object.assign(obiekt, dane)?

Jeszcze możesz dać ifa na tym inpucie. Vue dynamicznie podmieni wartość w momencie, gdy nie będzie nullem.

Rozwiązałem problem w ten sposób:

const email = ref('');
watch(
    () => store.getters.email,
    (newEmail) => {
        email.value = newEmail;
    }
);

Mozna skorzystac z computed get set