title: Vue.js - passing value from parent to child does not work (as expected)
body: <p>I pass the value from parent template to child template under this scheme:<br />
  <strong>parentModel -&gt; parentTemplate -&gt; prop -&gt; childModel -&gt; childTemplate.</strong></p>
  <p>That is, when getting in a child model, I need to handle value before installing in template... but it doesn't work!</p>
  <p>My method is similar to a kludge =(</p>
  <p><strong>Parent:</strong></p>
  <pre><code>&lt;template&gt;
    &lt;section class=&quot;login-wrapper border border-light&quot;&gt;
        &lt;form id=&quot;add-form&quot; class=&quot;form-signin&quot; enctype=&quot;multipart/form-data&quot; @submit.prevent=&quot;send&quot;&gt;
          &lt;label&gt;
            &lt;span&gt;Images&lt;/span&gt;
            &lt;input type=&quot;file&quot; id=&quot;files&quot; ref=&quot;files&quot; multiple @change=&quot;addFile()&quot;/&gt;
          &lt;/label&gt;
          &lt;button type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
        &lt;/form&gt;
        &lt;div id=&quot;files-container&quot;&gt;
          &lt;div v-for=&quot;(file, index) in files&quot; class=&quot;file-listing&quot; v-bind:key=&quot;index&quot;&gt;
            &lt;Preview :msg=&quot;file&quot;&gt;&lt;/Preview&gt;&lt;!-- here I send data to the child with :msg property --&gt;
          &lt;/div&gt;
        &lt;/div&gt;
    &lt;/section&gt;
  &lt;/template&gt;
  
  
  &lt;script&gt;
  import Preview from &quot;../Partial/ImagePreview.vue&quot;
  
  
  export default {
    name: &quot;ProductAdd&quot;,
    components: {
      Preview
    },
    data() {
      return {
        files: []
      }
    },
    methods: {
      addFile() {
        for (let i = 0; i &lt; this.$refs.files.files.length; i++) {
          const file = this.$refs.files.files[i]
          this.files.push( file );
        }
      },
      async send() {
        /// Sending data to API
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  <p><strong>Child:</strong></p>
  <pre><code>&lt;template&gt;
    &lt;section&gt;
      &lt;span&gt;{{ setImage(msg) }}&lt;/span&gt;&lt;!-- This I would like to avoid --&gt;
      &lt;img :src=&quot;image_url&quot; alt=&quot;&quot;/&gt;
    &lt;/section&gt;
  &lt;/template&gt;
  
  
  &lt;script&gt;
  export default {
    name: 'ImagePreview',
    data: () =&gt; {
      return {
        image_url: &quot;&quot;
      }
    },
    props: [ &quot;msg&quot; ],
    methods: {
      setImage(data) {
        const reader = new FileReader();
        reader.onload = (event) =&gt; {
          this.image_url = event.target.result;
        };
        reader.readAsDataURL(data);
        return null;
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  <p>I'm so sorry for a stupid question (perhaps), but I rarely work with frontend.
  Now there is such a need =)</p>
  <p><strong>PS: I tried using &quot;watch&quot; methods, it doesn't work in this case. When changing an array in the parent component, these changes are not passed to child</strong></p>