title: Multiple instance of same component are not independent in VueJS
body: <p>I'm working on a component to handle Image uploading on VueJS and I'm facing an issue with independancy of each components.</p>
  <p>parent.vue</p>
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;ImageUploader /&gt;
          &lt;ImageUploader /&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script lang=&quot;ts&quot;&gt;
      import { Component, Vue } from 'vue-property-decorator';
      import ImageUploader from '@/components/ImageUploader.vue';
  
      @Component({
          components: {
              ImageUploader
          }
      })
      export default class Credits extends Vue {
  
      }
  &lt;/script&gt;
  </code></pre>
  <p>ImageUploader.vue</p>
  <pre><code>&lt;template&gt;
      &lt;div class=&quot;form-group&quot;&gt;
          &lt;input v-if=&quot;input&quot; type='hidden' :name='inputName' :value='imageValue' class='edition_input'/&gt;
          &lt;label&gt;{{ label }}&lt;/label&gt;
          &lt;div class=&quot;file-selector&quot;&gt;
              &lt;img :src=&quot;imageChanged ? imageRender : imageValue&quot; style=&quot;width: 100%; height: auto;&quot;/&gt;
              &lt;label for=&quot;image&quot; class=&quot;btn btn-outline-blue&quot;&gt;{{ imageName }}&lt;/label&gt;
              &lt;input type=&quot;file&quot; name=&quot;image&quot; @change=&quot;processFile&quot; id=&quot;image&quot; class=&quot;form-control&quot; /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script lang=&quot;ts&quot;&gt;
      import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
  
      @Component
      export default class ImageUploader extends Vue {
  
          @Prop({ default: &quot;&quot; })
          label!: string;
  
          @Prop({ default: &quot;&quot; })
          defaultValue!: string;
  
          @Prop({ default: false })
          input!: boolean;
  
          @Prop({ default: &quot;&quot; })
          inputName!: string;
          
          image;
          imageRender: string|ArrayBuffer|null = &quot;&quot;;
          imageName = &quot;Fichier&quot;;
          imageValue: string|ArrayBuffer|null = &quot;&quot;;
          imageChanged = false;
  
          mounted(){
              this.imageValue = this.defaultValue != '' ? this.baseAPIPath + this.defaultValue : &quot;&quot;;
          }
  
          processFile(event){
              this.image = event.target.files[0];
              this.imageName = this.image.name;
  
              const reader = new FileReader();
              reader.onload = (e) =&gt; {
                  this.imageRender = e.target != null ? e.target.result : null;
                  this.imageChanged = true;
              };
              reader.readAsDataURL(this.image);
  
              this.$emit(&quot;update:imageName&quot;, this.imageName);
              this.$emit(&quot;update:image&quot;, this.image);
          }
  
          @Watch(&quot;imageName&quot;)
          imageNameChange(){
              this.imageValue = &quot;uploads/img/&quot; + this.imageName;
          }
  
          get baseAPIPath(){
              return process.env.VUE_APP_API;
          }
  
      }
  &lt;/script&gt;
  </code></pre>
  <p>The issue is that if I select a file with the second ImageUploader, the file is showed in the first one. In other terms, both components are clearly not independents...
  Is there a way to make each components state local ?</p>
  <p>I searched for solutions and <a href="https://stackoverflow.com/questions/50272331/vue-js-components-not-independent-of-each-other">this problem description</a> is pretty similar but the solution didn't work (or I didn't implemented it correctly, it's possible...)</p>
  <p>Thanks !</p>