[Vuejs]-Vue.js – passing value from parent to child does not work (as expected)

const Preview = Vue.component('ImagePreview', {
  data: () => {
    return {
      image_url: ""
    }
  },
  template: `
    <section>
      <span>{{ setImage(msg) }}</span><!-- This I would like to avoid -->
      <img :src="image_url" alt=""/>
    </section>
  `,
  props: [ "msg" ],
  methods: {
    setImage(data) {
      const reader = new FileReader();
      reader.onload = (event) => {
        this.image_url = event.target.result;
      };
      reader.readAsDataURL(data);
      return null;
    }
  }
});


new Vue({
  name: "ProductAdd",
  components: {Preview},
  data() {
    return {
      files: []
    }
  },
  methods: {
    addFile() {
      for (let i = 0; i < this.$refs.files.files.length; i++) {
        const file = this.$refs.files.files[i]
        this.files.push( file );
      }
    },
    async send() {
      /// Sending data to API
    }
  }
}).$mount('#container');

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id='container'>
  <section class="login-wrapper border border-light">
      <form id="add-form" class="form-signin" enctype="multipart/form-data" @submit.prevent="send">
        <label>
          <span>Images</span>
          <input type="file" id="files" ref="files" multiple @change="addFile()"/>
        </label>
        <button type="submit">Submit</button>
      </form>
      <div id="files-container">
        <div v-for="(file, index) in files" class="file-listing" v-bind:key="index">
          <Preview :msg="file"></Preview><!-- here I send data to the child with :msg property -->
        </div>
      </div>
  </section>
</div>