Vue v-for loop doesnt always work

My v-for loop wont start after a successful GET request.

Whats even weirder, sometimes when I refresh this page, this does work just fine.

I don't see any errors anywhere. The Articles heading and bootstrap pagination element always render.

Does this have to do with fetching being async? I can't figure this out.

Here's the code:

<template>
    <div>
        <h2>Articles</h2>
        <div v-for="article in articles" v-bind:key="article.id" class="card card-body">
            <h3>{{ article.title }}</h3>
            <p>{{ article.outro }}</p>
        </div>
        <nav aria-label="Page navigation example">
            <ul class="pagination">
                <li class="page-item"><a class="page-link" href="#">Previous</a></li>
                <li class="page-item"><a class="page-link" href="#">1</a></li>
                <li class="page-item"><a class="page-link" href="#">2</a></li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item"><a class="page-link" href="#">Next</a></li>
            </ul>
        </nav>
    </div>
</template>

<script>
export default {
    name: "Articles",
    data() {
        return {
            // Declare variables here
            articles: [],
            article: {
                id: '',
                title: '',
                outro: ''
            },
            // For put requests
            article_id: '',
            pagination: {},
            // Edit is false because this Form will add and edit
            edit: false
        }
    },

    // when the page has loaded
    created() {
        this.fetchArticles('/articles');
    },

    // write method logic below
    methods: {
        fetchArticles(pageUrl) {
            // Assign this Vue instance to a variable
            let vm = this;
            pageUrl = pageUrl || '/articles'
            fetch(pageUrl).then(response => response.json()).then(response => {
                this.articles = response.data;
                // Generate the pagination in this function
                vm.makePagination(response.meta, response.links);
            })
        },
        // Make pagination function
        makePagination(meta,links){
            this.pagination = {
                // Set the current page variable to the current page, defined in meta by the Laravel collection
                current_page: meta.current_page,
                last_page: meta.last_page,
                next_page: links.next,
                prev_page_url: links.prev
            };
        }
    }
}
</script>

And here's the simple GET route:

Route::get('/articles', function(){
    $articles = Article::paginate(2);
    return new \Illuminate\Http\Resources\Json\ResourceCollection($articles);
});