vue3 async setup (), чтобы мой шаблон не отображался

Я не могу понять, почему мои данные не отображаются, когда я использую асинхронный режим перед setup ().

Мой компонент вызывает модуль, который обрабатывает мои вызовы API. Из этого api я получаю токен, который хочу отобразить в моем клиенте в качестве теста. Я могу отобразить запрашиваемый токен в console.log, но не вижу его в области шаблона.

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>

Мой модуль 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: '[email protected]',
        password: '123123',
      });
      console.log(token.value);
    } catch (error) {
      console.log('error:', error);
      return new Error();
    }
  };
  return { login, token };
}

мой вызов api обрабатывается из api.js с помощью 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;
  },
};

Весь Login.vue пуст.

ВАЖНО: данные отображаются, если я удалю асинхронный режим из setup () и дождусь входа в систему ().

Но я не понимаю, почему я не могу использовать async.