Observing state object in pinia does not trigger when object changes

Question

I have a deep object in my pinia state where I want to place an observer.

export const useProductStore = defineStore("product", {
  state: () => ({
    attributes: {},
  }),
});

When an object has data inside it, it looks like this:

attributes: {
  english: {
    0: {
      key: "key1",
      value: "value1"
    },
    1: {
      key: "key2",
      value: "value2"
    },
    ...
  }
}

I'm trying to place an observer on this object, but when the value changes, the observer doesn't fire. This is the component I'm trying to do this in:

<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>

This comes directly from the pinia documentation, but when I change the state, nothing happens. Using vue dev tools I can see the state object is changing so I know it's reactive. What did I miss?

Answer 1

storeToRefs Generate ref()s.

You say this example "comes directly from the pinia documentation", but I doubt you found ref propagated anywhere in the pinia documentation. If you do this, then this is a bug and should be pointed out to posva by raising an issue on pinia's repository.

You can watch it directly for reference:

watch(
  attributes,
  handler, 
  { deep: true }
)

...or you can use an arrow function to view its .value¹:

watch(
  () => attributes.value,
  handler,
  { deep: true }
)

Note that the newVal and oldVal parameters are Agent ². To access its target, use toRaw.

Working Demonstration. p>

---

¹ - It allows for narrower observers, for example:

watch(
  () => attributes.value[0]?.value),
  handler
)

² - If you put an object into ref() " the object is related to reactive( )" Perform deep reactions (see Details). Also readReactive Proxy vs. Raw Proxy .