我有一个组件，必须显示来自API的一些数据。我从父页面发出请求，但循环发生在子组件中。但数据未显示在父页面中。
我收到这个错误：无效 prop ：属性“listObject”的类型检查失败。预期为Object，得到值为的String
是否有可能在子组件中移动嵌套的API请求？

子组件编码

<template>
    <div class="mt-2 mb-2">
        <h3 class="mb-0"><strong>{{listTitle}}: </strong></h3>
        <ul class="lists">
          <li v-for="list in listObject" :key="list.url">
            {{ list.name }}
          </li>
        </ul>
    </div>
</template>
<script>
    export default {
        props: {
            listTitle: String,
            listObject: Object
        }
    }
</script>

父组件

<template>
    <div v-if="movie.speciesData.length">
    <h1 class="movie__card-title card-title text-center">{{ movie.title }} </h1>
        <Lists listTitle="Test" listObject="movie.speciesData" />
    </div>
</template>

<script>
import axios from 'axios';
import Lists from '@/components/Lists.vue'
export default {
  name: 'MovieDetails',
  components: {
    Lists
  },
  data(){
    return {
      movie: {
        speciesData: [],
      },
    }
  },
  mounted() {
    axios.get('https://swapi.dev/api/films/'+this.id)
      .then(response => {
        this.movie = response.data;

        // Fetch species data for each species URL
        const speciePromises = this.movie.species.map(specieUrl => axios.get(specieUrl));

        // Wait for all specie data requests to complete
        Promise.all(speciePromises)
          .then(specieResponses => {
            this.movie.speciesData = specieResponses.map(response => response.data);
          })
          .catch(error => {
            console.error(error);
        });

      })
      .catch(error => {
        console.log(error);
      });
  },
};
</script>