I have a deep nested data which renders my Vue 3 application. My reactive state looks like this
import { reactive } from "vue";
import snapshot from "./snapshot";
export const state = reactive({
snapshot: snapshot
});
And my watcher looks like this
import { watch } from "vue";
import { state } from "@/store/state";
const consoleLog = () => {
console.log("i reacted");
};
watch([state.snapshot.data[0].data.elements[0]], consoleLog, {
deep: true
});
When i change the first (or any) element in my snapshot watcher reacts and console outputs "i reacted". But any following change does not react until i change anything on parent object.
What am i missing here?