Template not registering (or whatever is happening) the $route.query variable

Hey guys, im making a posts page and the thing in focus is pagination.

I've created a pagination component that looks like this:

<template>
    <nav aria-label="Pagination">
        <ul class="pagination justify-content-end">
            <li class="page-item" v-if="currentPage !== 1">
                <a @click="previous" class="page-link" href="javascript:void(0)" tabindex="-1">Previous</a>
            </li>
            <li v-for="page in getNumberOfPagesShow"
                v-bind:class="{ disabled: page === currentPage }"
                class="page-item">
                <a @click="clickPage(page)" class="page-link" href="javascript:void(0)">
                    {{ page }}
                </a>
            </li>
            <li class="page-item" v-if="currentPage !== totalPages">
                <a @click="next" class="page-link" href="javascript:void(0)">Next</a>
            </li>
        </ul>
    </nav>

</template>

<script>
    export default {
        name: "pagination",
        props: ['app', 'onClickPage', 'totalPages', 'page'],
        data()
        {
            return {
                currentPage: this.page,
                lastPage: 0
            }
        },


        computed: {
            getNumberOfPagesShow()
            {
                if (this.totalPages > 10)
                {
                    return 10;
                }

                return this.totalPages;
            }
        },

        methods: {
            previous()
            {
                this.currentPage--;

                this.clickPage(this.currentPage);
            },

            next()
            {
                this.currentPage++;

                this.clickPage(this.currentPage);
            },

            clickPage(page)
            {
                this.currentPage = page;

                this.onClickPage(page);
            }
        }
    }
</script>


<style scoped>

</style>

and the component is called using

                        <!-- Pagination Top -->

                        <pagination :total-pages="thread.posts.last_page"
                                    :page="app.$route.query.page"
                                    style="margin-top: 20px;"
                                    :on-click-page="clickPage">
                        </pagination>

Everything works, except the :page="app.$route.query.page" attribute, which sets the currentPage inside the pagination component.

Now, this code doesn't work:

            <li class="page-item" v-if="currentPage !== 1">
                <a @click="previous" class="page-link" href="javascript:void(0)" tabindex="-1">Previous</a>
            </li>

It's supposed to hide the previous button if current page is 1. However, this doesn't work, suggesting that app.$route.query.page is not getting the value correctly.

When I debug inside the created() method, I write

console.log(this.app.$route.params.query)

it does return the correct value. So I don't know what the problem is. Thank you in advance!