Como usar watch para dados aninhados em VueJs corretamente?

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.

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