Дергается контент при запросе на сервер, Vue.JS

При переходе по внутренним маршрутам по типу '/course/lesson3' происходит запрос на сервер для получения контента. Если переходить по маршруту кликнув на router-link, то контент отображается нормально. Но если менять url вручную, например, с '/course/lesson3' на '/course/lesson2', то контент компонента Lesson дергается. Сначала на мгновение отображается контент старого маршрута '/course/lesson3', а затем нового. Некрасиво. Для лучшего визуального отображения стоит анимация на 0.5с. Этого времени достаточно, чтобы сделать запрос. Тем не менее контент дергается, если вручную менять url. Что я делаю не так?

PS. Пробрасываю action с запросом на сервер в хуках beforeRouteUpdate и beforeRouteEnter, чтобы запрос шел если перешел через router-link и если ввел маршрут вручную в url.

routes.js

const routes = [
   {
       name: 'menu',
       path: '/',
       component: Menu,
       children: [
           {
               path: '/course',
               component: LessonsList,
               children: [
                   {
                       name: 'lesson',
                       path: 'lesson:id',
                       component: LessonProxy
                   }
               ]
           }
       ]
   }
];

LessonsList.vue

<template>
    <section>
    <ul>
        <router-link v-for="(lesson,index) in lessons"
                     v-bind:key="index"
                     :to="{
                        name: 'lesson',
                        params: {
                            id: index+1
                        }
                     }"
                     tag="li">
        </router-link>
    </ul>
    <transition name="slide" mode="out-in" appear>
        <router-view :key="$route.path"></router-view>
    </transition>
    </section>
</template>
   

LessonProxy.vue

<template>
    <section>
        <lesson></lesson>
    </section>
</template>

    export default {
        components: {
            Lesson
        }
        methods: {
            ...mapActions('lesson',{
                changeCurrentLesson: 'changeCurrentLesson'
            })

        },
        beforeRouteEnter(to,from,next){
            next(vm => {
                    let sendData = {};
                    sendData.lessonNumber = Number(to.params.id);
                    sendData.userId = vm.$store.getters['login/userId'];
                    vm.$store.dispatch('lesson/changeCurrentLesson', sendData);
            });
        },
        async beforeRouteUpdate(to,from,next){
                let sendData = {};
                sendData.lessonNumber = Number(to.params.id);
                sendData.userId = this.$store.getters['login/userId'];
                await this.$store.dispatch('lesson/changeCurrentLesson', sendData);
                await next();
        }
    }