首先，感谢那些谁将看这个。我是一个初学者与vue，所以我可能会错过一些明显的在这里，但经过几天的卡住，我在这里
在SFC上，我有一个onMounted从API（Spring Boot）获取数据。API调用工作正常，我可以在Chrome的Netwwork下看到它，响应包含我需要的数据。
我的AppLeague. vue文件

<template lang="">
    <div class="row">
        <div class="col-md-12">
            <h3>Leagues</h3>
        </div>
        <div class="col-md-12">
            <ul class="list-group">
                <li
                    v-for="(leagueItem, index) in leagues"
                    :key="index"
                    class="list-group-item"
                >
                    {{ index + 1 }}.{{ leagueItem.league_name }}
                    , Status:
                    {{ leagueItem.league_status }}, Code: {{ leagueItem.league_code }}
                </li>
            </ul>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import customAxios from "@/lib/customAxios";

interface League {
    league_id: number,
    league_name: string;
    league_code: string;
    league_status: string;
}

let leagues: League[];

onMounted(async () => {
    await customAxios
        .get<League[]>(`account/leagues`, {
            withCredentials: true,
    })
    .then((response) => {
        leagues = response.data;
    });
});
</script>

我的自定义axios文件

import axios from "axios";

export const customAxios = axios.create({
    baseURL: "http://localhost:8080/api/",
});

customAxios.interceptors.response.use(
    (response) => response,
    (error) => {
        if (error.response.status === 401) {
            window.location.href = '/';
        }
        if (error.response) {
            alert(error.response.data.message);
        }
    }
);

export default customAxios;

在Google Chrome浏览器的网络选项卡中，我可以看到HTTP 200代码和响应：[{"league_id":1,"league_status":"created","league_name":"Test League","league_code":"Test League Code"}]
但是，这里是呈现的页面：Rendered page
如果我返回VSCode并在中更改任何内容（例如添加一个空格并保存），则页面将刷新，值将按预期显示：Rendered image after altering DOM in VSCode
我想在页面加载时显示这些值，但似乎找不到方法。我猜它在第一次加载时不起作用，因为它显示的是let leagues: League[];的空值，并且DOM的更改强制在获取数据后获取这些值，但不确定如何强制DOM显示获取的值（如果有意义的话）。
我找不到vue3和的任何例子。
谢谢!