vue3 async setup() make my template not showing - vuejs3

Question

I cannot figure out why my data is not showing when I use async front of setup().
My component call a module that handle my api calls. From that api I receive a token that I want to display in my client, as a test.
I can display the token i'm requesting in the console.log but can't see it in the template area.
Login.vue :
<template>
<h1>LOGIN</h1>
<Suspense>
<template #default>
<div>My token: {{ token }}</div>
</template>
<template #fallback>
<div>Loading</div>
</template>
</Suspense>
</template>
<script>
import useLogin from '../modules/users';
export default {
async setup() {
const { login, token } = useLogin();
await login();
return { token };
},
};
</script>
My module user.js
import api from '../services/Api';
import { ref } from 'vue';
export default function useLogin() {
const token = ref(null);
const login = async () => {
try {
token.value = await api.userLoginToken({
email: 'user#test.com',
password: '123123',
});
console.log(token.value);
} catch (error) {
console.log('error:', error);
return new Error();
}
};
return { login, token };
}
my api call is handled from api.js with axios:
import axios from 'axios';
const apiClient = axios.create({
baseURL: process.env.VUE_APP_API_URL,
withCredentials: false,
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
});
export default {
async userLoginToken(credentials) {
const token = await apiClient.post('/users/login/token', credentials);
return token.data.token;
},
};
The whole Login.vue is blank
IMPORTANT: the data is showing if I remove async from of setup() and await front of login().
But I don't understand why i cannot use async.

Answer 1

Have to make the Suspense in the parent compoenent and move the fetch logic into a dedicated document to make it work.