How to force the component to update when the query parameter changes?

Question

Vue.js

I am getting data from api, along with pagination links. At the moment, the links in the address bar change, but the component is not updated. As I understand it, mounted works once. How to do everything in this case? How to track page changes and update the list of objects on the page?

<nav v-if="meta">
    <ul class="pagination">
        <template v-for="link in meta.links">
            <li
                :class="['page-item', { active: link.active }]"
                v-if="link.url"
            >
                <router-link
                    class="page-link"
                    :to="modifyUrl(link.url)"
                >
                    <span v-html="link.label"></span>
                </router-link>
            </li>
            <li class="page-item disabled" v-else>
                <span class="page-link" v-html="link.label"></span>
            </li>
        </template>
    </ul>
</nav>

const router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/admin',
            component: Dashboard
        }, {
            path: '/admin/lyrics/inbox',
            component: LyricsInbox
        }
    ]
});

const app = new Vue({
    el: '#app',
    components: { App },
    router
});

import axios from "axios";

export default {
    data() {
        return {
            loading: false,
            lyrics: [],
            meta: null,
        };
    },
    mounted() {
        this.loadLyrics(this.$route.query.page);
    },

    methods: {
        loadLyrics(page = 1) {
            this.loading = true;

            axios
                .get("/api/lyrics/inbox?page=" + page)
                .then((response) => {
                    this.lyrics = response.data.data;
                    this.meta = response.data.meta;
                })
                .catch((error) => {
                    console.error(error);
                })
                .finally(() => {
                    this.loading = false;
                });
        },

        modifyUrl(url) {
            return url.replace(/^http.*?\/api\//, "/admin/");
        },
    },
};

Answer 1

Tyk