Vue中替换嵌套数组内Agent ID为完整Agent数据问题求助

我有一个数组，其中每个元素包含agents子数组，该子数组仅存储Agent的ID。希望通过这些ID获取每个Agent的完整数据，将原agents数组替换为包含完整信息的新数据，或附加新数据到对应Agent条目。以下是已尝试的代码，求更简便的实现方式？

预期效果 #

原数据结构：

filteredEvents: [
 { 
  agents: ['id', 'id'], // 存储纯文本ID
  eventData: ''
 }
]

预期结果：

filteredEvents: [
 { 
  agents:
  [
    { id: '', name: '', ...}, // 通过ID获取的完整Agent数据
    { id: '', name: '', ...},
  ],
  eventData: ''
 }
]

已实现代码 #

事件处理方法 #

otherAgentsEvents() {
  // 暂时无关的过滤逻辑
  // const events = this.events
  // const user = this.getUser._id
  // const filteredEvents = events.filter(event => !event.agents.includes(user));

  filteredEvents.forEach(event => {
    const agents = event.agents

    agents.forEach(agent => {
      const data = this.fetchAgentData(agent)
      // 此处需将 event.agents[agent] 替换为获取到的data
    })
  })

  return filteredEvents
}

异步获取Agent数据方法 #

async fetchAgentData(agentID) {
  try {
    const agent = await this.$axios.$get(`/api/get-specific-agent/${agentID}`)

    if (agent.success) {
      return agent.data
    }
  } catch (err) {
    console.log(err)
  }
}

对应Vue模板 #

<div v-for="(event, key) in otherAgentsEvents" :key="key">

  <div v-for="agent in event.agents" :key="agent.id">
    // 当前仅能获取ID，无法访问first_name等字段
    <p>{{ agent.first_name }}</p>
  </div>
  
  <div>
    {{ event.eventData }}
  </div>

</div>

后续尝试与问题 #

基于参考回答实现了代码，但出现错误。我使用vuex而非pinia，因Reactive未定义已移除相关代码。

Agent数据管理模块 #

import axios from 'axios'

const store = {
  agents: [],
  getAgent: (id) =>
    new Promise((resolve) => {
      console.log(id)
      const agent = store.agents.find(({ id: i }) => i === id)
      if (agent) {
        resolve(agent)
      } else {
        axios.get(`/api/get-specific-agent/${id}`).then(({ data }) => {
          store.agents.push(data)
          resolve(data)
        })
      }
    }),
}

export const useAgents = () => store

修改后的事件处理方法 #

otherAgentsEvents() {
  // const events = this.events
  // const user = this.getUser._id
  // const filteredEvents = events.filter(event => 
  // !event.agents.includes(user))

  filteredEvents.map(async (event) => {
    const agents = event.agents

    event.agents = await Promise.all(
      agents.map((id) => useAgents().getAgent(id))
    )
    return event
  })
    
  return filteredEvents
},

问题：短暂显示预期结果后，应用崩溃，报错如下：

内容的提问来源于stack exchange，提问作者Philippe