Vue.jsのonchangeイベント時にVue Devtoolsで値の変更を検知出来ない場合の対策

内部的には問題無く更新されているようだったが、なんとなく釈然としないので試行錯誤してみました。

コード

HTML

<input type="file" ref="file0" accept="image/*" class="" id="file0" name="file0" @change="onImageChange(0, $event)">
<input type="file" ref="file1" accept="image/*" class="" id="file1" name="file1" @change="onImageChange(1, $event)">
<input type="file" ref="file2" accept="image/*" class="" id="file2" name="file2" @change="onImageChange(2, $event)">

JavaScript

var data = {
    imagesArr:[],
}
const app = new Vue({
    el: '#app',
    data: data,
    methods: {
        onImageChange(index, e) {
            const imgfiles = e.target.files;
            for(let file of imgfiles) {
                let reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = (e) => {
                    /* 省略 */
                    this.imagesArr.push('foo'); //この処理は適当な例です
                    console.log(this.imagesArr); //ここでconsole.logにて参照すると問題無い
                    /* 省略 */
                }
            }
        }
    }
}

再現手順

1. Vue Devtoolsを開き、imagesArrの変数の値を確認出来る状態にしておく
2. input fileで適当なファイルを選択
3. Vue Devtoolsで値を見るとArray[0]のまま、コンソールを見るとArray[‘foo’]みたいな感じで出力されている
4. 他の操作（例えばVueのonclickイベントを付与したボタンを押す等）を実行するとVue Devtools上の値も更新される。または、コンソールを開いた状態で操作してからVue Devtoolsを開くと値は更新されている。

対策

画面から変数を参照する。具体的には、ビュー側に下記のような要素を追加したところ、Vue Devtoolsの値も即座に更新されるようになった。

<p>{{ imagesArr.length }}</p>

Vue Devtoolsにおける動作の仕様なのか、理由は結局分からず。