Ошибка: {#each} выполняет итерацию только по объектам, подобным массивам. Javascript и Svelte

<script context="module">
    import GhostContentAPI from '@tryghost/content-api';

    // const api = 'http://localhost/posts';
    const api = new GhostContentAPI({
        url: 'http://localhost',
        key: '95a0aadda51e5d621abd2ee326',
        version: "v3"
    });

    export async function preload({ params, query }) {
        try {
            const response = await api.posts.browse({ limit: 5, fields: 'title, slug' });
            return {
                posts: response
            }
        } catch(err) {
            console.log('Error');
        }
    }
</script>

<script>
    export let posts;
</script>

<svelte:head>
    <title>Blog</title>
</svelte:head>

<h1>Recent posts</h1>
<ul>
    {#each posts as post}
        <li>
            <a rel='prefetch' href='blog/{post.slug}'>{post.title}</a>
        </li>
    {/each}
</ul>

Я использую ванильный JavaScript и Svelte, чтобы просто получить список сообщений блога, которые являются объектами из Ghost Blog Rest API. Функция Ghost API работает нормально и извлекает правильные объекты, но проблема начинается при попытке использовать блок Svelte {#each} для отображения каждого объекта, потому что они не находятся в массиве, и я не могу понять, как это исправить. Вот точное сообщение об ошибке в консоли:

Error: {#each} only iterates over array-like objects.

Написание console.log(response) после объявления const response выводит прикрепленное изображение, но только если я сначала закомментирую блок {#each}.

Я предполагаю, что мне просто нужно переместить 5 объектов в массив, но я также не понимаю, почему console.log выше работает только тогда, когда HTML закомментирован.