My vue code is not correctly working!!

Hi please look at following vue codes. First one is UploaderList component and it can contain a list of uploader component which is second one.

<template>
  <div>
   <div class="row" v-if='uploaders.length'>
    <div class='col-4 my-2' v-for='u,index in uploaders' :key="index">
     <uploader @on_remove='remove_uploader' :uploader='u'/> 
    </div>  
   </div>
   <hr>
   <div>
     <button @click='create_uploader'>Create new uploader</button>
   </div>
  </div>
</template>

<script>
 import uploader from "./uploader"
 export default {
   components:{
     uploader,
   },
   data(){
     return {
       uploaders:[],
       uploader_counter:0,
     }
   },
   methods:{
     remove_uploader(uploader){
      const index = this.uploaders.findIndex((u)=>{
        return u.id == uploader.id;
      }) 
      this.uploaders.splice(index,1);
     },
     create_uploader(){
       this.uploader_counter++;
       this.uploaders.push({
        id:this.uploader_counter,
       });
     }
   }
 }
</script>

<template>
    <div class='card'>
      <div class="card-body">
       <input type="file" v-if='!file_selected' @change='set_image_source'>   
       <img :src="source" v-if='file_selected'>
      </div>     
      <div class="card-footer">
       <button class="btn btn-danger btn-sm" @click='remove'>Remove uploader</button>   
      </div>
    </div>
</template>
<script>
export default {
 props:{
   uploader:{
       type:Object,
       required:true,
   }  
 },
 emits:['on_remove'],   
 data(){
     return {
       file_selected:false,
       source:null,  
     }
 },
 methods:{
     set_image_source(event){
         console.log(event.target.files[0])
       this.source = URL.createObjectURL(
           event.target.files[0]
       );  
       this.file_selected = !this.file_selected;
     },
     remove(){
         this.$emit('on_remove', this.uploader)
     }
 }
}
</script>
<style scoped>
 img{
     max-width: 300px;
 }
</style>

I am really confused. I add uploaders and select image files then I try to remove an uploader but application removes next sibling uploader component. You can try it and see that the image you try to remove is not getting remove but the action is made on subsequent element. I am using JS Array.splice. Thank you in advance for any help.