How to get the id of the current account and pass it to the Pinia store request?

Question

JavaScript

I am using Vue3 Composition Api + Pinia

I have an AccountStore:

import { defineStore } from 'pinia'

export interface Account {
    id: string
    number_personal_account: string
    building_type: string
    checked: number
    balance: number
    created_at: string
    house_guid: string
    room_guid: string
}

export type Filters = 'all' | 'processing' | 'debt'

export interface State {
    current: Account | Record<string, string>
    accounts: Account[]
}

export const useAccountStore = defineStore('Account', {
    state: () => {
        return {
            current: {},
            accounts: [],
        } as State
    },
    getters: {},
    actions: {
        initStore(payload: Account[]) {
            this.$patch({
                current: payload.length ? payload[0] : {},
                accounts: payload,
            })
        },
    },
})

An asynchronous TheCurrentAccount.vue component that initializes the store

<template>
    <button class="current-account">
        <icon-accounts-list class="current-account__icon" />
        <p class="current-account__title">
            {{ currentAccount.building_type ?? 'Лицевые счета' }}
        </p>
    </button>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue'
import AccountService from '../api/AccountService'
import { useAccountStore } from '../store/useAccountStore'
import IconAccountsList from './Icons/IconAccountsList.vue'

export default defineComponent({
    name: 'TheCurrentAccount',
    components: {
        IconAccountsList,
    },
    async setup() {
        const accountStore = useAccountStore()

        const currentAccount = computed(() => {
            return accountStore.current
        })

        const response = await AccountService.getAll()

        const accounts = [
            {
                id: 'f77e3f0c-d9ab-4c7e-a6f6-da298cd64b5e',
                number_personal_account: '1500000002',
                building_type: 'Квартира',
                checked: 1,
                balance: 0,
                created_at: '2021-10-08T13:21:10.000000Z',
                house_guid: '123',
                room_guid: '312',
            },
        ]

        accountStore.initStore(accounts)

        return { currentAccount }
    },
})
</script>

<style lang="scss" scoped>
@forward '@styles/components/TheCurrentAccount.scss';
</style>

And the balance component in which I want to get the current account from the store, take its id and pass it as an argument to the request.
If I pass currentAccountId to the markup, then the id will be displayed, but I need to get it at the time the request is sent.
Tried through watch, computed, took out the logic in the store - by. I understand that at the time of component initialization, my store has not yet been updated, how to do it more correctly, please explain

<template>
    <button class="balance">
        <p>{{ orderLink }}</p>
    </button>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue'
import AcquiringService from '../api/AcquiringService'
import { useAccountStore } from '../store/useAccountStore'

export default defineComponent({
    name: 'TheBalanceCard',
    async setup() {
        const accountStore = useAccountStore()

        const currentAccountId = computed(() => {
            return accountStore.current.id
        })

        const orderLink = await AcquiringService.getOrderLink(
            currentAccountId.value
        )

        return { orderLink }
    },
})
</script>

<style lang="scss" scoped>
@forward '@styles/components/TheBalanceCard.scss';
</style>