Why doesn't my modal component get the right value of props? - vue.js

Question

The parent component has pass an integer to the child component - <DeleteModal>.
<DeleteModal> includes a button and a Modal. With clicking on the button the modal will be displayed asking for the confirmation. I've tested that the props is correctly passed to <DeleteModal> by print out the eventIndex when clicking on the button. However, when showing the eventIndex in the Modal it's always the smallest index (e.g. 0).
<template>
<button
type="button"
class="btn btn-close"
data-bs-toggle="modal"
data-bs-target="#removeModal"
aria-label="Remove"
#click="test"
></button>
<div class="modal fade" id="removeModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Remove Event</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
Are you sure that you want to remove this event from this csv file?
This process cannot be resumed.
eventIndex: {{ this.eventIndex }}
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-bs-dismiss="modal"
#click="test"
>
Cancel
</button>
<button
type="button"
class="btn btn-primary"
data-bs-dismiss="modal"
#click="remove_event"
>
Remove
</button>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from "axios";
export default {
props: ["eventIndex"],
methods: {
test() {
console.log(this.eventIndex);
},
remove_event() {
//...
},
},
};
</script>
<style lang=""></style>