Try to use onMounted hook to manipulate asynchronous call :
setup() {
const users = ref([]);
onMounted(async () => {
const res = await axios.get("https://jsonplaceholder.typicode.com/users");
users.value = res.data;
console.log(res);
});
return {
users,
};
},
LIVE DEMO
According to official docs the Best approach is to use async setup in child component and wrap that component by Suspense component in the parent one :
UserList.vue
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
async setup() {
//get users from jsonplacerholder using await fetch api
const users = await fetch("https://jsonplaceholder.typicode.com/users").then(res => res.json());
return {
users
}
}
})
</script>
<template>
<div>
<!-- list users -->
<ul>
<li v-for="user in users">{{ user.name }}</li>
</ul>
</div>
</template>
Parent component:
<script lang="ts">
import UserList from "../components/tmp/UserList.vue";
...
</script>
<div>
<!-- Suspense component to show users -->
<Suspense>
<template #fallback>
<div>loading</div>
</template>
<UserList />
</Suspense>
</div>