Reactivity not working correctly when updating array of references

[karatekaneen]

Reproduction

I have a document that has an array with references:

files: [
	'collection/document1',
	'collection/document2',
	'collection/document3',
	'collection/document4',
] 

and in my component I've bound the containing document with $bind:

this.$bind('allGuidelines', guidelineCollection, { maxRefDepth: 0 })

and it works correctly where my files prop is an array of strings.
But when I update the document in another part of the code like:

const files = guideline.files.filter(f => f.path !== 'collection/document2')
await db.collection(col).doc(docId).update({ files })

The bound document is updated but instead of removing the correct item it removes the last item.

Expected:

files: [
	'collection/document1',
	'collection/document3',
	'collection/document4',
] 

Actual:

files: [
	'collection/document1',
	'collection/document2',
	'collection/document3',
] 

When reloading the page the data is correct so this problem only occurs when bound.

Am I doing anything wrong or can this problem be avoided somehow?

[posva]

can you provide a boiled down reproduction using one of the examples provided on this repository?

[karatekaneen]

I couldn't get the examples to compile correctly so I made a gist instead: https://gist.github.com/karatekaneen/6ee5d1936bd854ac64ed8b45bd630089

[posva]

The example is just an HTML file, so it should contain js (can be modern though). You can change the script that includes a local version of vuefire to include one from a CDN like https://unpkg.com/vuefire. I will also need to know what data to add to a database or even better, a working test connection to debug the issue.

If you manage to reproduce it in a unit test, that would also work! But note not all bugs are reproducible in unit tests

[karatekaneen]

Created a new gist that works standalone: https://gist.github.com/karatekaneen/ef2486f5335eefc8c66b66b3136da313

Here it binds to a collection where data == "hello".
The path of this document is demo/test. The document itself looks like this initially:

{
    "data": "hello",
    "files": []
}

When clicking the button to add documents new documents are created in the demo-files collection and references to these documents are added to the files array. When clicking the remove button the file at index 1 is filtered out and the document is updated. This results in that the last document disappears from the screen instead of the one at index 1. But when refreshing the page the last item is back and the second item is gone.

PS.
Forgot to mention but if the document paths are strings it works, I was only able to recreate it when using document references.

And also, thanks for a great package, this is the first problem that I've had with it, and I've been using it a lot!