How to simply reuse async user fetching logic in multiple Vue components?

I am fetching the OAuth User-Data and returning its corresponding DB-User-Value (from prisma) in my exported function getLoggedInAccount().

import axios from 'axios';
import { client } from './client/trpc.ts';

async function getUserObject() {
  const user = await axios.get('http://localhost:3000/auth/guard', {
    withCredentials: true,
  });
  return user.data;
}

export async function getLoggedInAccount() {
  const userObject = await getUserObject();
  return client.auth.loggedInAccount.query({
    oAuthID: userObject.user.id,
  });
}

I want to use that User in the Frontend (Vue):

type Account = RouterOutput['auth']['loggedInAccount'];
let currentAccount = ref<Account>({} as Account);
async function fetchAccount() {
  try {
    currentAccount.value = await getLoggedInAccount();
  } catch (error) {
    console.error('Failed to fetch:', error);
  }
}

This works perfectly fine, but I don’t want to copy/paste that logic into every component. Due to it’s asynchronous nature, I cant seem to find any simpler solution (e.g. just exporting a const)

Thanks, hope you can help 🙂