Vue组件未显示正确的数据

Question

我正在使用Laravel + Vue以模态显示一些数据。我有10位与会者，每位与会者都有具体数据。

我调用通过prop发送参与者ID的组件，如下所示：

<expand-details :atendente="{{ $id }}"></expand-details>

安装组件后，我向我的端点发出axios get请求，在此我收到该与会者ID，然后得到他的结果。事实是，在google chrome vue工具上，我可以看到每个参加者都收到了正确的数据，但是当我打开模式时，它会显示任何参加者的最新信息。

这就是我所得到的：

<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>

有什么想法为每个与会者显示正确的数据吗？

谢谢！