Como usar watch para dados aninhados em VueJs corretamente?

Desenvolvimento Web
#1

Eu queria saber como usar o watch para dados aninhados em VueJs corretamente para alteração em algum valor de uma variável. No meu código tem um componente pai que recebem dados de uma função ajax, põe o dado em um objeto e usam esse dado para renderizar componentes filhos através de v-for. Exemplo de implementação:

<template>
    <div>
        <player v-for="(item, key, index) in players"
            :item="item"
            :index="index"
            :key="key"">
        </player>
    </div>
</template>

Aí dentro da tag script:

data(){
     return {
         players: {}
 },
 created(){
        let self = this;
        this.$http.get('../serv/config/player.php').then((response) => {
            let pls = response.body;
            for (let p in pls) {
                self.$set(self.players, p, pls[p]);
            }
    });
}

O objeto item é algo assim:

item:{
   prop: valor,
   outraProp: {
       propAninhada: valorAninhado,
       array: [{type: "a", num: 1},{type: "b" num: 6} ...]
    },
}

Funciona, mas parece um pouco complicado para mim e eu queria saber se este é o jeito certo de programar isso. Meu objetivo é realizar alguma ação toda vez que o prop muda ou array recebe novos elementos ou alguma variação dentro dos já existentes. Agradeço qualquer sugestão.

#2

Para usar watch em dados aninhados em VueJs você pode usar deepwatcher dessa forma:

watch: {
  item: {
     handler(val){
       // seu código
     },
     deep: true
  }
}

Essa alteração faz com que sejam detectadas qualquer mudança no estado de objetos dentro do array e adições a esse array.

Se você não deseja observar todas as alterações no objeto de nível superior e deseja apenas uma sintaxe menos complicada para observar objetos aninhados diretamente, basta usar computed. Exemplo:

var vm = new Vue({
  el: '#app',
  computed: {
    foo() {
      return this.item.foo;
    }
  },
  watch: {
    foo() {
      console.log('Foo mudou!');
    }
  },
  data: {
    item: {
      foo: 'foo'
    }
  }
})

Outra abordagem possível é usar a seguinte sintaxe:

watch:{
     'item.outraProp': function (novoVal, velhoVal){
         //para agir sobre mudanças em outraProp
     },
     'item.prop': function(novoVal, velhoVal){
         //para agir sobre mudanças em prop
     }
 }