How to await new data after switching dataSource in useDocument?

[approxit]

Howdy!

I'm trying to contain vuefire inside of Pinia store.
As managing collections works fine for me, as the user can receive blank collection page with spinner/skeleton until data arrives - I need different approach with single documents.

I want to fetch single document and await for it, to check if it exists, then act accordingly.

• If document was found - proceed and display the contents.
• If document was not found - display 404 error page.
  Best option is to take this action at the router level, to mitigate flashing empty.
  Here is my snippet in vue-router for context:

beforeEnter: async (to) => {
	const objectStore = useObjectStore();

	if (!(await objectStore.fetch(String(to.params.objectId)))) {
		return {
			name: 'not_found',
			params: {
				pathMatch: to.path.substring(1).split('/'),
			},
			query: to.query,
			hash: to.hash,
		};
	}
}

So far, so good!

Yet, having Pinia store kinda forces us to keep data refs constant, fortunately we can use target argument, so at first glance store implementation could look like this:

export const useObjectStore = defineStore('objectStore', () => {
	const db = useFirestore();

	const objectsRef = collection(db, 'objects');
	const object = ref<Obj | null>(null);
	
	return {
		object,
		fetch: async (objectId: string): Promise<Obj | null> => {
			const { promise } = useDocument(() => doc(objectsRef, objectId), { target: object });

			await promise;

			return object.value;
		},
	};
});

But unfortunately we receive following console warning:

[VueFire] the passed "options.target" is already the returned value of "useDocument()/useCollection()". If you want to subscribe to a different data source, pass a reactive variable to "useDocument()/useCollection()" instead

That's fair, but the problem is - using reactive value detaches our control of when we can await for new data.
I've browsed the docs, and questions in discussions, but nothing caught my attention to archive my goal.

My current workaround is to send different request to check for object existence, and then use reactive flow as normal. It's not ideal, but it works.

My question is: How I can change data source and await the changes?

[posva]

Composables must be at the top level. So it becomes:

export const useObjectStore = defineStore('objectStore', () => {
	const db = useFirestore();

	const objectsRef = collection(db, 'objects');
	const currentObjectId = ref(0) // or maybe from the route?
	const { promise, data: object } = useDocument<Obj>(() => doc(objectsRef, currentObjectId.value));

	async fetchObject(objectId: string) {
		currentObjectId.value = objectId
		await nextTick() // from vue, we need to wait for changes to propagate
		await promise.value
		return object.value
	}
	
	return {
		object,
		fetchObject,
	};
});