Шаблон не обновляется с помощью ref() ⇐ Javascript

[Anonymous]

У меня есть компонент, которому нужны внешние данные (API) для заполнения содержимого шаблона с помощью асинхронных функций. Я сократил его настолько, насколько мог, и переименовал некоторые переменные для лучшего понимания.
Компонент:

Код: Выделить всё

Scheduled Events
{{ error }}

{{ nextEvent.event.name }}
test





export default {
components: { EventSnippet },
setup() {
const { error, getNextEvents, getNextEventDetails } = useSchedule(2025);
const { nextEvent } = getNextCardDetails();

return { error, nextEvent };
},
};

и составные:

Код: Выделить всё

import { ref } from "vue";
import callApi from "./API/callAPI";

const useSchedule = (year) => {
const error = ref(null);

const getSchedule = async () => {
const query = {
request: "getEventId",
params: { year: year, league: "xyz" },
};
const res = await callApi(query);
return res;
};

const getNextEvents = async () => {
const nextEvents = ref(null);
const yearSchedule = await getSchedule();
const onlyFutureEvents = yearSchedule.result.filter((event) => {
return new Date(event.startDate).getTime() > new Date().getTime();
});
const arrayNextSorted = onlyFutureEvents.sort(
(event, today = new Date()) => {
const eventDate = new Date(event.date);
console.log(eventDate - today);
return eventDate - today;
}
);
nextEvents.value = arrayNextSorted;
return nextEvents;
};

const getNextEventDetails = async () => {
const nextEvent = ref(null);
try {
const nextEvents = await getNextEvents();

const nextEventid = nextEvents.value[0].eventId;
const query = {
request: "getEventDetails",
params: { league: "xyz", eventId: nextEventid },
};
const res = await callApi(query);
nextEvent.value = res;
} catch (err) {
error.value = err.message;
}
return { nextEvent };
};

return { error, getNextEvents, getNextEventDetails };
};

export default useSchedule;

Я быстро объясню, почему я попробовал это составное решение:

• Код: Выделить всё

  getSchedule

  возвращает все события

• Код: Выделить всё

  getNextEvents

  возвращает все события, которые еще не произошли (я хочу повторно использовать их в другом месте) в приложении

• Код: Выделить всё

  getNextEventDetails

  возвращает только следующее событие и его детали (требуется еще один вызов API).

Я не претендую на то, что это правильный код, вероятно, плохо написанный, это просто лучшее, что я мог сделать, исходя из своего небольшого опыта.
Теперь, когда я записываю значения в консоль через составную часть, все они верны. У меня такое чувство, будто я потерял себя из-за всей этой асинхронности/

Код: Выделить всё

await

возможно и наверняка с реактивностью ref().

Подробнее здесь: https://stackoverflow.com/questions/798 ... e-with-ref