[Vuejs]-Assign Fetch output to another variable in VueJS 3 / Composition API

Wrong usage of async await

vue.js demo
url:https://vuejs.org/api/composition-api-lifecycle.html#onserverprefetch

onMounted(async () => {
  if (!data.value) {
    // if data is null on mount, it means the component
    // is dynamically rendered on the client. Perform a
    // client-side fetch instead.
    data.value = await fetchOnClient(/* ... */)
  }
})

your code

<script setup>

import { ref, onMounted } from 'vue';
import AppDaySelector from "./AppDaySelector.vue";
import MealPrepAPI from '../api/MealPrepAPI.js';

const mealPrepSummary = ref({});
let weekdays = ref({});

onMounted(async () => {
    let fetchStatus = 'S';
    try{
       weekdays.value = await MealPrepAPI.index();
       console.log('res.data',weekdays)
    }catch(e){
       alert("Error fetching summary from REST API : " + error);
        fetchStatus = 'E';
    }

});

</script>
<template>
    <pre>{{mealPrepSummary}}</pre>  <!-- This return the value because it renders after the data from api is loaded -->  
    <AppDaySelector :weekDays="weekDays"   ></AppDaySelector>
</template>

What is the result of console?