Vue component not showing the correct data

I'm using Laravel + vue to show some data in a modal. I have like 10 atendees and for each one theres specific data.

I call the component sending the atendee id via prop, like that:

<expand-details :atendente=""></expand-details>

When the component is mounted, I make an axios get request to my endpoint where I receive this atendee id then get his results. The thing is, on the google chrome vue tools I can see that each atendee has received his correct data but when I open the modal, it shows the latest for whatever atendee.

That's what I have got:

<template>
<div>
    <a class="pointer blue underline" @click="$modal.show('detalhes')">Expandir</a>

    <modal name="detalhes" height="auto">
        <div class="container p-2">
            <li v-for="detalhe in atendimentos">
                <p v-text="detalhe.atendimento_id"></p>
            </li>

            <div class="row">
                <div class="col-12">
                    <button
                        class="btn btn-default btn-sm"
                        @click="$modal.hide('detalhes')"
                    >Fechar</button>
                </div>
            </div>
        </div>
    </modal>
</div>

<script>
export default {
props: ['atendente'],

data() {
    return {
        atendimentos: {}
    }
},

mounted() {
    axios.get(atendentes, {
        params: {
            id: this.atendente
        }
    }).then((response) => {
        this.atendimentos = response.data
    })
}
}
</script>

Any ideas how to show the proper data for each atendee?

Thanks!

via Chebli Mohamed