How to make a component re-render when routed?

Question

Vue.js

This is a router

import {apiGetUser} from "../api/api";


import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

const router = new VueRouter({
    mode: 'history',
    base: "quiz/",
    routes: [
        {
            path: "/:step([1-9]{1}|[1-9]{2})",
            name: "step",
            component: () => import('../components/Question.vue'),
            beforeEnter: async (to, from, next) => {
                const user = await apiGetUser();
                if (user.data.data.ended) {
                    return next({ name: 'finish' });
                }

                if (user.data.data.step !== to.params.step) {
                    return next({ name: 'step', params: {step: user.data.data.step} });
                }

                return next();
            }
        }
    ],
});

export default router;

Here on successful request I do a redirect from the vue component

methods: {
        next: async function (e) {
            const data = new FormData(e.target);
            // console.log(this.$router)
            const response = await apiQuestion('POST', this.$route.params.step, data);
            if (response.data.success){
                console.log('new step', this.$route.params.step + 1);
                this.$router.push({
                    name: 'step',
                    params: {
                        step: this.$route.params.step + 1
                    }
                })
                    .catch(error =>{
                        console.log(error);
                    });
            }
            if(!response.data.success){
                this.$toast.error(response.data.message);
            }
        }
    }

I see that the url is changing, but the component component: () => import('../components/Question.vue') from the "step" route is not re-rendered, since the mounted has already worked, how to force the component to re-render when redirecting

I need this is because on mounted I send a request, and the data from the api response is sorted

Answer 1

You don't have to do that. Instead, watch on step and make a request there.