computed() doesn't update when deleting from a ref(Map)
Vue version
3.3.4
Link to minimal reproduction
Steps to reproduce
1- Create a new ref with a new Map inside like the following: const prices = ref(new Map()) 2- Define a computed() fn that uses the ref with the Map 3- Delete item from Map and see how that doesn't trigger a recompute. (Keep in mind .set() does trigger a recompute.)
What is expected?
Trigger a recompute when deleting item from Map
What is actually happening?
It doesn't trigger a recompute when deleting an item from Map
System Info
No response
Any additional comments?
No response
I believe the computed is recomputing as expected.
The problem is that you're modifying the items in products inside computedProductsWithPrices. That would be considered a side effect and should be avoided. When the price is deleted from the map it is re-running computedProductsWithPrices, but the old value for price is still present on the item in products from the last time it ran.
The debug info you're including in the template is misleading. products is being changed, but the updated version is not being rendered because products in not reactive.
Here's a tweaked version of your example, but with the addition of delete _pr.price inside computedProductsWithPrices to remove the old price. It works fine:
However, as I noted earlier, the computed here still has a side effect. A better way to do this would be to avoid modifying products in the first place by taking a copy of each item before adding the price property:
Ohhh oof, you're 100% right. I thought in my brain that the JS Map was already copying the object for some reason, but it makes sense that it doesn't and just iterates through the references. Thanks for taking the time to reply <3