属性中的动态变量被视为未定义

我有2个Vue组件。父组件：list of services谁存储许多service组件。

服务视图

<template lang="pug">
  a.list-group-item.list-group-item(id='list-' + name + '-list' data-toggle="list" href="#list-" + name role="tab" aria-controls=name) {{ name }}
</template>

<script>
export default {
  props: {
    name: String,
    description: String
  }
}
</script>

List.vue

<template lang="pug">
  section.border-bottom.border-warning
    .container(style="background-color: #EA846F")
      .text-white.text-center.title Serviciile oferite
    .list-group#list-tab(v-if="response.status === 200" role="tablist")
      service(v-for="service in response.data" :name="service.name" :description="service.description")
    .h5.text-muted.text-center(v-else) {{ response.statusText }}
</template>

<script>
import service from './service';

import axios from 'axios';

export default {
  data() {
    return {
      response: {},
    }
  },
  components: {
    service
  },
  methods: {
    async getAll() {
      this.response = await axios.get('http://localhost:3000/infos');
    }
  },
  async mounted() {
    await this.getAll();
  }

为什么要name作为prop发送并用于服务模板undefined？我怎样才能解决这个问题 ？