Vue.js 2 propsの配列データをscriptで参照したい

Question

親から子に渡した配列データをscript内でアクセスしたいのですが、上手くいきません。
文字列や数値だと参照できるのですが、何故か配列だと駄目なようです。
propsをVue開発ツールで見ると、データは渡せており、template内で参照は出来ることを確認しました。

// 親
<template>
  <example :arr="parent.arr" />
</template>

<script>
  data() {
    return {
      parent: {
        arr: [/* ... */]
      }
    }
  },
  mounted() {
    this.getArr()
  },
  methods: {
    getArr() {
      axios.get(url, {
        params: {/* ... */}
      })
      .then(res => {
        if (res.data) {
          this.parent.arr = res.data
        }
      })
    }
  }
</script>

// 子
// <template>...</template>

<script>
export default {
  props: {
    arr: Array
  },
  mounted() {
    console.log(this.arr) // [__ob__: Observer] (データは存在しない)
    console.log(this.$props.arr) // undefined
    console.log(this.$parent.parent.arr) // undefined
  }
}
</script>

Answer 1

自分でも作ってみたところ、想定通り特に問題ありませんでした。。
https://codesandbox.io/s/5yzx45jp94

これまでの経験からすると、親の配列のデータは最初から固定なものでしょうか？
何かによって配列の操作をしている場合、配列の変化はちゃんと感知してくれない場合があります。
その場合、表示はされているけど、Scriptでの操作はおかしくなります。
こういった操作をしてはいないでしょうか？
公式ドキュメント

Comments

[SystemRyota]

ご回答ありがとうございます。

先程、とりあえず解消したのですが、以下が要因のようでした。。

親コンポーネントにて mounted 時にaxiosにてデータを取得していた兼ね合いで取得出来なかったみたいです。

現在は子コンポーネントにwatchを追加して、以下のコードにしています。
watch: {
arr(val) {
console.log(this.arr)
}
}

こういったケースでウォッチャーを使用するのは良くない気がしています。
ベスト(一般的)な対応策はどのようなコードになるのでしょうか。

[sakapun]

axiosでデータを取得して、配列に追加している時のコードはどのようなものですか？

this.arr += newArr;
とかは回答で提示したように、変化なしと捉えられる可能性があります。
this.arr.push(...newArr);
であれば問題なかったりします。

その辺の見直しをするべきなので、コレ以上のサポートにはコードの例示をお願いします