У меня недостаточно знаний о том, почему моя DOM не отображает результаты моего вызова API из storyblok

Я делаю приложение на Nuxt, используя storyblok в качестве моей CMS. Однако я получал ошибки при попытке связать массив storyblok с моими массивами, вызываемыми в моем шаблоне с помощью v-for. Я получил небольшую помощь от другого пользователя и исправил ошибки, но теперь у меня недостаточно знаний о том, почему DOM не отображает результаты моего вызова API на моих v-for, вызванных в шаблоне ("книги "и" сообщения ")

Вот шаблон:

<template>
    <div>
    <!-- instance header -->
    <InstanceHeader title="Books" />

    <div class="pageContainer">

    <div class="booksInfoPost"> 

        <div class="booksInfoPost__subHeader"><h3>Top Books</h3></div>

        <div class="booksInfoPost__topBooks"> 

         <BooksInfoPostTop 
            v-for="book in books"
            :key ="book.id"
            :bookCover="book.bookCover"
            :title="book.title"
            :author="book.author"
            :content="book.content"
            :id="book.id"
            /> 

        </div> 

        <div class="booksInfoPost__subHeader"><h3>Book Titles</h3></div>

         <BooksInfoPost 
            v-for="book in posts"
            :key ="book.id"
            :bookCover="book.bookCover"
            :title="book.title"
            :author="book.author"
            :content="book.content"
            :id="book.id"
            />  

        </div>
    </div>

</div>
</template>

Вот мой сценарий:

    <script>
    import InstanceHeader from '~/components/InstanceHeader';
    import BooksInfoPostTop from '~/components/BooksInfoPostTop';
    import BookTitles from '~/components/BookTitles';
    import BooksInfoPost from '~/components/BooksInfoPost';
    import axios from 'axios';

export default  {

    components: {
        InstanceHeader,
        BooksInfoPostTop,
        BookTitles,
        BooksInfoPost
    },

    data() {
        /* return {
            books: [],
            posts: []
        } */

    },

    async asyncData(context) {
    const result = {};
    const mapBooks = b => {
      return {
        id: b.slug,
        bookCover: b.content.bookCover,
        title: b.content.title,
        author: b.content.author
      };
    };

    result.posts = await context.app.$storyapi
      .get("cdn/stories", {
        version: "draft",
        starts_with: 'books/book-titles'
      }).then(response => {
        console.log(response);
        response.data.stories.map(mapBooks);
      })

    result.books = await context.app.$storyapi
      .get("cdn/stories", {
        version: "draft",
        starts_with: 'books/top-books'
      }).then(response => {
        console.log(response);
        response.data.stories.map(mapBooks);
      })

    return result; // it has right property names {books:[], posts:[]}
  }   
}

</script>

Я не самый опытный разработчик, и если кто-то может помочь, я буду признателен. Спасибо