Vue вычисленное свойство, возвращающее обещание?

Question

У меня есть вычисляемое свойство, которое запускает вызов API и возвращает данные:

async ingredients() {
    const url = "/api/ingredients";

    const request = new Request(url, {
      method: "GET",
      credentials: "same-origin"
    });

    const response = await fetch(request);
    const json = await response.json();
    //debugger;
    return json;
}

У меня есть отладчик, который перехватывает страницу при загрузке и содержит все данные, которые я ожидаю увидеть (переменная json - это массив с моими элементами внутри него.)

Но когда я смотрю на компонент Vue в инструментах Vue Dev, он просто говорит:

ingredients:Promise

Я использую эту же структуру на работе все время, но я не могу понять, что в этом особенного.Если я перехожу к маршруту API в своем браузере, я вижу ожидаемый JSON.

Я перебираю его, как:

<tr v-for="(ingredient, index) in ingredients" :key="index">

Но как ingredientsздесь просто подразумевается Обещание, таблица не отображается.

Я не уверен, что это важно, но я использую микс Vue / Laravel.Сторона Laravel работает совершенно нормально, вызов API возвращается в ожидаемом URL.