When using computed collection, Vuefire duplicates docs in useCollection upon update of a document

Question

this is a follow-up to my question here, as I now face a slightly different issue: it's an update issue in my userRecipes= useCollection(...) array.

My collection recipeRef is declared as reactive data, as I do not know the user id when loading the app, which determines the path to the recipes collection (db>users>user.id>recipes>recipe).

const user = useCurrentUser();
const recipeRef = computed(() => {
    return collection(db, `users/${user.value?.uid}/recipes`);    
})
const userRecipes = useCollection(recipeRef);   

It works when just loading or refreshing the page, I get all my documents with the right values. However if I update a document (for example setting a "last viewed" timestamp) then the userRecipes array updates wrongly. For example, if it started with docs [A,B,C] and I update B to B*, then userRecipes will be updated to [B,B*,C] instead of [A,B*,C].

To rule out other issues, I've tested the same by hardcoding the path with a specific user id and not going through a computed collection. For example, if user.id = 123456, then:

const userRecipesTest = useCollection(collection(db, `users/123456/recipes`)

This test does work (I ran it concurrently), the updated fields of doc B will show in userRecipesTest as [A,B*,C] after the update.

So the source of the issue seems like the use of a reactive collection inside useCollection(). And as far as I've read the Vuefire docs this is allowed.