Vue child component property does not work

You have to make the property value reactive by returning a factory function.

props: {  file: {    type: File,    required: true,    default: function () {        return {          name: '',          _progress: 0        }      }  }},

If you're looking for a working solution you can simply assign a key to the my-uploader-progress component based on the presence of an __img property, which will force it to re-render when the property becomes available ..

<my-uploader-progress        v-for="file in files"        :file="file"        :key="file.__img ? '1-' + file.name : '0-' + file.name"        :hide-upload-progress="hideUploadProgress"        :color='color'></my-uploader-progress>

CodeSandbox

Sort of an ugly hack, but I hope this will fix the issue. Try setting a timeout in the mounted function to buy some time before the file gets loaded and then true the v-if condition to load image element in the DOM.

<template>  <q-item-side v-if="file_loaded" :image="file.__img.src"/></template><script>data () {  file_loaded: false},mounted() {  setTimeout(() => {    this.file_loaded = true  }, 1000)}</script>

I have tried this in your sandbox [B] and it's working fine.