I am facing an issue with setting a watcher on a deeply nested object in my Pinia state.
export const useProductStore = defineStore("product", {
state: () => ({
attributes: {},
}),
});
When the object has data inside it, it looks something like this:
attributes: {
english: {
0: {
key: "key1",
value: "value1"
},
1: {
key: "key2",
value: "value2"
},
...
}
}
I have tried to set a watcher on this object, but unfortunately, the watch does not trigger. Here is the component where I am attempting to do this:
<script setup>
import { useProductStore } from "@/stores/ProductStore";
import { storeToRefs } from "pinia";
const productStore = useProductStore();
const { attributes } = storeToRefs(productStore);
watch(() => ({...attributes}), (newValue, oldValue) => {
console.log(oldValue);
console.log(newValue);
}, { deep: true });
</script>
Although this code is directly from the Pinia documentation, I am not seeing any changes reflected when the state is updated. The Vue dev tools show that the state is indeed updating reactively. Can anyone help me figure out what I am missing?