在我的组件的脚本中，我用axios发出了一个get请求，但是在请求的结果准备好之前，组件就被渲染了。我该怎么做？顺便说一下，我尝试了onBeforeMount，并将axios.get放入同步函数中，并在onMounted内部调用它，这些都不起作用。

<template>
    <div class="p-4 m-4 bg-white rounded flex flex-col">
        <div>
            <h1 class="text-2xl text-gray-700">Projects</h1>
        </div>
        <div class="justify-center flex">
            <table class="table-auto justify-center">
                <thead>
                    <tr>
                        <th class="border px-4 py-2">ID</th>
                        <th class="border px-4 py-2">Name</th>
                        <th class="border px-4 py-2">Tasks</th>
                        <th class="border px-4 py-2">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="project in projects" :key="project.id">
                        <td>{{project.id}}</td>
                        <td>{{project.name}}</td>
                        <td>{{project.task_count}}</td>
                        <td>Actions</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>
<script setup>
    import {onMounted , ref} from 'vue';
    let projects = ref(null);

    onMounted(  ()=> {
        axios.get('/api/projects').then(res => {
            projects = res.data.data;
        });
    });
</script>