Vue Js not updating DOM first time with updated array

I want to make a image preview when upload images. I could able to get the path of image in an array but the array not updates first time when i upload the image. When i click the DOM on vue-tool it updates the array but the image doesn't preview. I have itemsImages array. when i upload images the array should have updated immediately. But it doesnt update. If i click on DOM from vue-devtools the array updates. Here is my code:

html

<div class='row'>
   <div v-for="item in itemsImages"></div>
</div>

script

export default {

data() {
        return {
            items: [],
            itemsAdded: '',
            itemsNames: [],
            itemsSizes: [],
            itemsImages: [],
            itemsTotalSize: '',
            formData: '',
        },
        methods: {
           onChange(e) {
            this.successMsg = '';
            this.errorMsg = '';
            this.formData = new FormData();
            let files = e.target.files || e.dataTransfer.files;
            this.itemsAdded = files.length;
            let fileSizes = 0;
            var vm = this;
            for (let x in files) {
                if (!isNaN(x)) {
                    this.items = e.target.files[x] || 
                    e.dataTransfer.files[x];
                    this.itemsNames[x] = files[x].name;
                    this.itemsSizes[x] = this.bytesToSize(files[x].size);
                    fileSizes += files[x].size;

                    var reader = new FileReader();
                    reader.onload = (event) => {
                        vm.itemsImages[x] = event.target.result;
                    };
                    reader.readAsDataURL(files[x]);
                    this.formData.append('items[]', this.items);

                }
            }
            this.itemsTotalSize = this.bytesToSize(fileSizes);
        },

    },

}

here is an screenshot:

from Newest questions tagged laravel-5 - Stack Overflow http://ift.tt/2vozZCm
via IFTTT