VueJS - 如何在同一组件中的另一个 API 调用中使用一个 API 调用的响应

Question

这是我的场景，我试图在另一个 API 中使用来自一个 API 响应的 ID：

下面是Component.vue：

<template>
  <div class="Contents">
      <div class="vx-col" v-for="idea in ideas" v-bind:key="idea.id">
          <vx-card>
            ...
            <div>
              {{idea.name}} of {{idea.id}}
            </div>
            <div v-if="sum">
              {{sum.total}}
            </div>
            ...
          </vx-card>
     </div>
  </div>
</template>

<script>
...

async created () {

  await this.$http.get('/ideas')
    .then((response) => { this.ideas = response.data })
    .catch((error) => { console.log(error) })
},
methods: {

  getSumOfIdeas(id){
    this.$http.get('/sum_of_ideas/'+ id +'/everything')
      .then((response) => { this.sum = response.data })
      .catch((error) => {console.log(error)})
  }
},
mounted (){
  this.getSumOfIdeas(this.ideas.id)   //Here i am trying to give that id coming from the /ideas 
}
</script>

这是 console.log(response.data) 在 /ideas 中给出的内容：

不知道我哪里出错了，目前在我的控制台中我收到一个错误：

 /sum_of_ideas/undefined/everything // so here id coming from the /ideas should have been rendered.

为了清楚起见，我使用了一个 {{idea.id}} 示例，它在每次循环时只显示数字。

请帮我解决这个问题，我想在另一个响应中使用来自 /ideas 的响应，即 id，这里是 /sum-of-ideas。