Component not updating (even though data is updated in devtools) when using external class to change data in Pinia Store [Nuxt 2/Bridge]

[millansingh]

Reproduction

https://github.com/millansingh/pinia-reactive-fail

Steps to reproduce the bug

The repository I linked shows reference code, but it is not a working repro. Creating a working repro of this is non-trivially difficult, as I'd have to repro or shim a lot of interconnecting code.

The repo has the following files:

1. Store.ts: a trimmed down version of the store I'm using (meant to include only the relevant code to the issues at hand).
2. BrandsDriver.ts: a trimmed down version of the external data fetcher class I created to load/manipulate data from Firestore and pass that back to the Store. I included the base class here which has the code in question, though technically I am using an extension in my code (which modifies other unrelated stuff).
3. NotWorking.vue: a trimmed down version of the component where I'm using the Store. This is a page component in Nuxt 2/Bridge.
4. Working.vue: a trimmed down version of another page where I'm using my data fetcher directly instead of going through the store which ameliorates the "delete" bug explained below.

There are two bugs, one of which I've managed to paper over with a manual $forceUpdate, the other which I cannot seem to fix.

Expected behavior

First bug:

When adding data in the external data fetcher, and calling the handler function to update the refs in the store, I expect the UI to show the updated keys (in the "NotWorking.vue" example file).

Second bug:

When deleting data from the external data fetcher, and again calling the handler function in the store, I expect the UI to show the keys without the one that was deleted.

Actual behavior

First bug:

The contents of the store ("brands") do not show up when added after startup. In the reference code, you'll see in the store that I "subscribe" to data (ie setup a websocket connection to fetch and update in the client on changes in the server - Firestore) only after verifying the current user.

Lines 11-13 of "Store.ts" are where I run a manual "forceUpdate" in order to get the new data to render after it's been fetched.

If I don't "forceUpdate" there, the data does not show in the UI, even though devtools shows the data is correct in both Pinia and the component's data.

Second bug:

When deleting data from the store, the UI does not render the new data (minus the one deleted). This is only fixed after either refreshing the page or navigating to a different page and then navigating back again (ie, forcing an update through other means). Again, the data shown in devtools for both Pinia and the component are correct. This is represented in the "NotWorking.vue" file.

In the "Working.vue" component, the keys array actually does update when I call the "testDelete" function. Again, it is relying on the "forceUpdate" on lines 22-24, but the keys array is modified in the UI after deleting the object.

Additional information

No response

[millansingh]

I had a sudden epiphany. Since Vue 2's composition API still relies on Vue 2's reactivity system instead of Vue 3's, it seemed like I may have been struggling with those same limitations.

When I replaced the parts of my code that updated, added, or deleted data from the external driver class with set/del from Vue 2, it magically started working as intended. The part that I didn't realize before was that Vue 2's composition API is not creating a reactive copy of the data you give it but instead converting the data you provide it into reactive data. Therefore, you need to manipulate it the same way you manipulate reactive data in Vue 2 (with set/del).

So, a lesson learned here: you still need to use set/del from Vue when using external classes/functions to manipulate data to be used in a Pinia store (or directly in a component).