Vue 3 reacts to deep change only once

274 views Asked by At

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?

0

There are 0 answers