How to delete an item in an array inside of a modal and don't close the modal vue3? - vuejs3

Question

I have a input file to select some files, as soon as I select them a preview modal is open containig the array, the user must delete one of the files if wanted but everytime I click do delete it, the modal just closes (the item is deleted btw).
Here's the template:
<div id="showFiles" class="modal fade" ref="modal" aria-labelledby="staticBackdropLabel">
<div class="modal-dialog modal-dialog-scrollable modal-lg">
<div class="modal-content">
<div class="modal-header p-3 bg-soft-primary">
<h5 class="modal-title">Arquivos</h5>
</div>
<div class="modal-body">
<div v-for="file in files" :key="file.name" class="preview-card border rounded">
<div class="d-flex align-items-center p-2">
<b-img v-if="file.type != 'application/pdf'" class="img-thumbnail me-2" alt="200x200" width="200"
:src="generateURL(file)" data-holder-rendered="true" />
<iframe v-else class="img-thumbnail me-2" data-holder-rendered="true" frameBorder="0" scrolling="no" alt="200x200" width="200" :src="generateURL(file)" />
<div class="flex-grow-1">
<div class="pt-1">
<h5 class="fs-11 mb-1" data-dz-name="">
{{ file.name }}
</h5>
<p class="fs-9 text-muted mb-0" data-dz-size="">
<strong>{{ (file.size / 1024) / 1000 }}</strong> MB
</p>
<strong class="error text-danger" data-dz-errormessage="" />
</div>
</div>
<div class="flex-shrink-0 ms-3">
<b-button-group>
<b-button class="btn btn-sm btn-danger" #click="remove(files.indexOf(file))">
Excluir
</b-button>
</b-button-group>
</div>
</div>
</div>
</div>
<div class="modal-footer hstack gap-2 justify-content-end">
<button type="submit" class="btn btn-success btn-label chat-send waves-effect waves-light"
#click="formSubmit">
<i class="ri-send-plane-2-fill align-bottom label-icon" />Enviar
</button>
</div>
</div>
</div>
</div>
And here is the script of the delete option:
remove(i) {
this.files.splice(i, 1)
},
I've tried preventDefault(), #click.prevent and modal.show() right after the splice but none of it worked.