I am new to VueJS and I was trying to upload multiple pictures. The form looks like this.

I am using Vue from CDN on a blade file. The problem is when I click delete, it is not the one clicked which is removed, but the last one. I have noticed that the one clicked is actually removed from the data, but the form doesn't update like that. Any help is appreciated. My code looks like this:

Vue.createApp({
    data() {
        return {
            images: []
        }
    },
    methods: {
        addField(images){
            images.push({});
        },
        removeField(index, images){
            images.splice(index, 1);
        }
    }
}).mount('#picture')

<input id="picture" type="file"
 class="form-control-file{{ $errors->has('picture') ? ' is-invalid' : '' }}"
 name="picture[]" accept="image/*" required>
                                    
 @if ($errors->has('picture'))
 <span class="invalid-feedback" role="alert">
     <strong>{{ $errors->first('picture') }}</strong>
 </span>
 @endif