Getter values are overwritten when return value is an array and is passed to ref

[BillyBobFry]

Reproduction

https://stackblitz.com/edit/github-kwwys9-s4mss8?file=src%2FApp.vue

Steps to reproduce the bug

1. Visit the stackblitz reproduction link
2. Click the 'update dog' button to update the first element of the 'dogs' array

Expected behavior

• The dogs ref is updated
• The catsAsDogs getter value is not updated

Actual behavior

• The dogs ref is updated
• The catsAsDogs getter value IS updated

Additional information

Not sure if the information I gave in my expected/actual behaviour steps is too specific to the example, but more generally: If a getter returns an array, and that array is passed to a ref as its initial value, then updating an element of the ref array also causes the getter's return value to be updated.

I have a suspicion I simply don't understand refs well enough, but I've read a lot of the docs and examples, and can't see where I'm going wrong! What we want to do is:

• Initiate a ref based on a Pinia store getter value when setting up the component
• Mutate that ref value without mutating the Pinia store getter value

This seemed like the 'correct' way to do that.

[posva]

This is expected in terms of JS, you are copying the references to the same objects (e.g. https://www.freecodecamp.org/news/primitive-vs-reference-data-types-in-javascript/). If you want to create a copy, you need to copy the array and objects:

const store = useCatDogStore();

const dogs = ref(store.catsAsDogs.map(c => ({...c})));

Also note that using destructuring for getters and state won't always work, so it's prefered to use storeToRefs() (https://pinia.vuejs.org/core-concepts/#using-the-store)

[BillyBobFry]

Thanks very much for the response! Mapping each array item to itself is the approach I'd put in to work around what I thought was the issue, so I'll leave it like that.