How to iterate useQuery with payload inside or outside onMounted

Question

i am trying to iterate over a query that requires as variable.

The first thing i tried was doing it inside onMounted like this:

onMounted(async () => {
    arrayOfObjects.value.forEach(async (object: ObjectType) => {
        const { data } = await useQuery<QueryResponse>({
            variables: { id: object.id },
            query: QUERY,
        });
    });
});

Doing this will give the following error:

Error: use* functions may only be called during the 'setup()' or other lifecycle hooks.

---

So then i tried to save the id in a ref() and set the query outside onMounted like this:

const id = ref<number>();

const { executeQuery: getObject } = await useQuery<QueryResponse>({
    variables: { id: id.value },
    query: QUERY,
    pause: true,
});

onMounted(async () => {
    arrayOfObjects.value.forEach(async (object: ObjectType) => {
        id.value = object.id;

        const objectValue = await getObject();
    });
});

The problem here is the despite pause being set to true it will try to execute the query while the ref id is still undefined so the response is the following error:

message: "Variable "$id" of required type "ID!" was not provided."

I know the given ID is correct because i tried using the query with a hardcoded ID.

Any ideas what could help?