[Vue.js] データを変更したときに画面が更新されない

`Vue.js` でデータを変更したのに画面が更新されず、はまったのでメモ。 <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-DfVKPufyUgcWFCRjhzFTZkOBDEGNH-gGpjRdlu2pqXByqVQSgzZLmRue6fd5dOJyiS1hVF3QXRDjZGW6jiFvu6QUjyYu1Gel4LYNcWZei3VaXb8RS3esSJuhlirwOcV2JKrp-QXJu5g/s1600/vuejs.png" imageanchor="1" hidden><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-DfVKPufyUgcWFCRjhzFTZkOBDEGNH-gGpjRdlu2pqXByqVQSgzZLmRue6fd5dOJyiS1hVF3QXRDjZGW6jiFvu6QUjyYu1Gel4LYNcWZei3VaXb8RS3esSJuhlirwOcV2JKrp-QXJu5g/s200/vuejs.png" width="200" height="200" data-original-width="400" data-original-height="400" /></a> ## 配列やオブジェクトを直接変更している `Vue.set` を使う必要があります。 - https://jp.vuejs.org/v2/guide/reactivity.html#%E5%A4%89%E6%9B%B4%E6%A4%9C%E5%87%BA%E3%81%AE%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A0%85 ## Vue がネストしている 今回私がはまったのはこちらでした。 ネストしていると子供側が上手く動作しないようです。 - https://gist.github.com/xl1/fa72b71e775c7ffd5788 私はネストしないように変更して対応しました。 ## 参考 URL - https://qiita.com/bobu_web/items/ec5a98d03758d12ad721 - https://gist.github.com/xl1/fa72b71e775c7ffd5788 - https://note.com/ojk/n/nf41aeaf12307