Vue how to watch inner values of json data

问题

I have 'd' array in data and I want to watch if its elements gets changed, but some of the elements are nested.

My example is basically if I change the value Apple to Axe watcher should execute the methods inside of it, How do I achieve it?

 <template>
  <div>
    <button @click="change">Click me</button>
    {{ d }}
  </div>
</template>

<script>
export default {
  watch: {
    d: function() {
      this.hello();
    },
  },
  data() {
    return {
      d: [{ a: 'apple' }, { b: 'bananana' }, 'c'],
    };
  },
  methods: {
    hello() {
      alert('Executed');
    },
    change() {
      this.d[0].a = 'axe';
    },
  },
};
</script>

<style></style>

回答1:

Use deep: true on your watcher

watch: {
    d: {
      handler(val) {
        this.hello();
      },
      deep: true
    }
  },

来源：https://stackoverflow.com/questions/61911167/vue-how-to-watch-inner-values-of-json-data