Use Async method in Compositiion API

I’m using Ionic Vue (Ionic 6 and Vue 3) and I want to have a simple async function in my composition API, but making a method async breaks it.
I get this error “studentDetails.vue?c633:26 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘0’)”.
I commented out the part of the code that uses async with await to hone in my problem after it didn’t work with it, and simply taking out async while leaving the first if statement works fine, but it blows up when I use async. The console.log works, but I get that error and nothing renders. I left it here to provide context and show how I’m using await later on. I’m rather confused what composition API example I can find look this simple.

setup() {
    const store = useStore();
    const route = useRoute();

    var studentId = ref(route.params.id); //may need to make var instead of const and experiment with options API method

const loadedStudent = computed(() =>
      getStudent(studentId.value)
    );
      const getStudent = async (studentId) => {
      const student = store.getters.student(studentId);

      if (student) {
        console.log("gotten from State: ", student);
        return student;
      }
      // else {
      //     const studentJson = await storage.get(studentId);
      //     const studentParsed = JSON.parse(studentJson);
      //     store.dispatch("addStudent", studentParsed);
      //     console.log("gotten from sql and added to state: ", student);
      //     return student;
      // }

  }
}

Which line is this actually referring to?

Also, computed's should be side-effect free, i.e. no async. Computed’s are better used as derived values. To load your student, you should instead just be calling a function and assigning the value to a reactive object.

I’ll include some more code. It was referring specifically to " :classType=“loadedStudent.classTypes[classTypeFilter].class”.
I’m also gettign these warnings from vue.
“runtime-core.esm-bundler.js?d2dd:38 [Vue warn]: Unhandled error during execution of render function”
“runtime-core.esm-bundler.js?d2dd:38 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at Vue Issue Helper

<template >
<div v-if="loadedStudent">
  <base-layout
    :pageTitle="loadedStudent ? loadedStudent.name : 'Loading...'"
    page-default-back-link="/"
  >

    <h2 v-if="!loadedStudent">could not find student with given ID</h2>
    <!-- changed it from foil to passedStudentListClassFilter -->
    <student-overview
      v-else
      :classType="loadedStudent.classTypes[classTypeFilter].class" **//line with error**
      :classTime="loadedStudent.classTypes[classTypeFilter].classGroupIds"
      :name="loadedStudent.name"
      :notes="loadedStudent.classTypes[classTypeFilter].notes"
    >
    </student-overview>
  </base-layout>
 <div/>
</template>

I tried using a reactive object and got these errors and warning instead. I also get that error regardless of whether the getStudent Function is async or not.
“studentDetails.vue?c633:94 Uncaught (in promise) ReferenceError: Cannot access ‘getStudent’ before initialization”. Referring to this line
“const loadedStudent = reactive(getStudent(studentId.value));”
Vue Warnings:
“runtime-core.esm-bundler.js?d2dd:38 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at Vue Issue Helper
“runtime-core.esm-bundler.js?d2dd:38 [Vue warn]: Unhandled error during execution of setup function”

      const loadedStudent = reactive(getStudent(studentId.value)); **//Line with error**

      const getStudent = async (studentId) => {
      const student = store.getters.student(studentId);
      if (student) {
        console.log("gotten from State: ", student);
        return student;
      }
      // else {
      //     const studentJson = await storage.get(studentId);
      //     const studentParsed = JSON.parse(studentJson);
      //     store.dispatch("addStudent", studentParsed);
      //     console.log("gotten from sql and added to state: ", student);
      //     return student;
      // }
    }

Thanks for taking a look and helping me out.

I figured out the answer. I used this to get data to load. I used a v-if statement to handle the data redering when data is ready on the tamplate.

watchEffect(async () => {
      await storage.create();
      // const getStudent = async (studentId) => {
      const student = store.getters.student(studentId.value);
      // gets student from state in vuex if possible, otherwise looks in localstorage
      if (student) {
        console.log("gotten from State: ", student);
        displayPage.value = "true";
        loadedStudent.value = student;
      }
      else {

          const studentJson = await storage.get(studentId.value);
          const studentParsed = JSON.parse(studentJson);
          store.dispatch("addStudent", studentParsed);
          console.log("gotten from sql and added to state: ", student);
          return student;
      }

    });