Calling a huge object inside v-for causing massive lag? - performance

Question

recently I'm working on a project showing sport events data
While v-for through the events array (which is around 500~2000 length), I'll call a method in each to show their participants name
<div v-for="event in eventArr" :key="event.id">
<template v-if="mappingObj[event.id]">
<div class="participantName">
{{ getCorrespondParticipants (
mappingInfo[event.id][mappingId],
mappingInfo[event.id][sportId])
}}
</div>
</template>
</div>
what it looks like in template, mappingObj is a object collecting all event data with event id as key, its length is around 500~2000(same as the origin events array)
getCorrespondParticipants (pidArr, sportId) {
this.participantListObj[sportId];
});
// this part was supposed to get corresponded participants data from the object, returning this.participantListObj[sportId][pid in pidArr]
return pArr;
},
The method was trying to get the participants info, tho even if I remove all the lines just left 'this.participantListObj[sportId]' there(so it basically did nth but calling the obj), it still causing massive lag result to slow performance for my page, not to mention there's another method to get the league info
participantListObj () {
let cloneObj = JSON.parse(
JSON.stringify(this.totalParticipantList)
);
for (let sportId in cloneObj) {
cloneObj[sportId] = cloneObj[sportId].reduce(
(pObj, item) =>
Object.assign(pObj, { [item.participant_id]: item }),
{}
);
}
return cloneObj;
},
which would looks like...
participantListObj :{
1: {
123:{
participant_id: 123
name_EN: 'Player',
name_CN: '玩家'
},
...(18000+)
}
}
The obj is participants list object under each sport Id, made from a participants array list which length could be around 18000, in this case the page has only one sport that is soccer. Did I did anything wrong?