Vue pagination creates pagination links starting from 0

I am following a tutorial on Vue and Laravel pagination. I am creating pagination links based on the data that I get from the backend, by parsing pagination.total_pages.

                <li
                    v-for="page in parseInt(pagination.total_pages)"
                    class="page-item"
                    v-bind:class="{ 'active': pagination.current_page === page }"
                >
                    <a href="#" @click.prevent="switchPage(page)">{{ page }}</a>
                </li>

The problem is that it creates pagination links starting from 0. So, for example when I get for pagination.total_pages some number, like 2 for example it createas 2 pagination links, 0 and 1. In the tutorial everything works fine with the same code. I am using Vue 1, since I am implementing this in my project where I have already used Vue v1, and in the tutorial Vue v2 is used, but that shouldn't do any difference? This is my component:

<template>
    <nav aria-label="Page navigation">
        <ul class="pagination">
            <li v-bind:class="{ 'disabled': !pagination.links.previous }">
                <a href="#" aria-label="Previous" @click.prevent="switchPage(pagination.current_page - 1)">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li
                v-for="page in parseInt(pagination.total_pages)"
                class="page-item"
                v-bind:class="{ 'active': pagination.current_page === page }"
            >
                <a href="#" @click.prevent="switchPage(page)">{{ page }}</a>
            </li>
            <li v-bind:class="{ 'disabled': !pagination.links.next }">
                <a href="#" aria-label="Next" @click.prevent="switchPage(pagination.current_page + 1)">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
</template>

<script>
    import eventHub from '../events.js'

    export default {
        props: {
            pagination: Object,
            for: {
                type: String,
                default: 'default'
            }
        },
        methods: {
            switchPage (page) {
                if (page < 1 || page > this.pagination.total_pages) {
                    return
                }

                eventHub.$emit(this.for + '.switched-page', page)
            }
        }
    }
</script>

What am I doing wrong?