vue.js – Como mantener los datos de autenticacion

Estoy realizando una practica de Vue 3 junto a Django Rest Framework, lo que estoy intentando hacer es una validacion de autenticacion por medio de token, un usuario inicia sesion se va a generar un token, pero me estoy encontrando con un problema y es que al momento de realizar el login lo hace de forma correcta y logro obtener el token generado, el problema es al momento de recargar la pagina el token ya no se encuentra en el aplicativo de vue, una posible solucion que decidi es hacer que el token se guarde en el local storage, pero siento que no es la solucion correcta.
Este es mi Login.vue:

<template>
  <h2>login</h2>
  <form method="POST" @submit.prevent="sendData" autocomplete="off">
    <input
      type="text"
      placeholder="Nombre de Usuario"
      v-model.trim="username"
    />
    <input
      type="password"
      placeholder="Contraseña de Usuario"
      v-model.trim="password"
    />
    <button type="submit">enviar</button>
  </form>
</template>

<script>
  import { ref } from '@vue/reactivity';
  import { watchEffect } from '@vue/runtime-core';
  export default {
    setup() {
      const username = ref('');
      const password = ref('');

      const token = ref('');

      const sendData = () => {
        fetch(`http://localhost:8000/auth-token/`, {
          method: 'POST',
          body: JSON.stringify({
            username: username.value,
            password: password.value,
          }),
          headers: {
            'Content-Type': 'application/json',
          },
        })
          .then((res) => res.json())
          .catch((error) => console.error('Error:', error))
          .then((response) => {
            token.value = response.token;
          });
      };

      watchEffect(() => localStorage.setItem('Token', token.value));

      return {
        username,
        password,
        sendData,
      };
    },
  };
</script>

<style></style>