Vue.js page transition not working?

Question

Vue.js

There is a list of data and a page
List component - list

<template>
    <div>
        <router-link class="btn btn-danger" to="/flm/cm/main/create">Создать новую запись</router-link>
         <router-link class="btn btn-primary"    style="color:#fff;" :to="'/flm/cm/main/index/1'">1</router-link>
        <router-link class="btn btn-primary"    style="color:#fff;" :to="'/flm/cm/main/index/2'">2</router-link>
        <router-link class="btn btn-primary"    style="color:#fff;" :to="'/flm/cm/main/index/3'">3</router-link>
        <a v-for="(item, index) in itemsList" v-bind:key="index" href="#" class="list-group-item list-group-item-action active">
                    <div class="d-flex w-100 justify-content-between">
                    <h5 class="mb-1">{{item.id}}</h5>
                    <small>3 days ago</small>
                    </div>
                    <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
                    <router-link    style="color:#fff;" :to="'/flm/cm/main/view/' + item.id">Просмотр</router-link>
                    <router-link    style="color:#fff;" :to="'/flm/cm/main/edit/' + item.id">Edit</router-link>
                
               
        </a>
    </div>
</template>
<script>
import axios from "axios";
// @ is an alias to /src
axios.defaults.withCredentials = true;
import {SET_CM_ITEMS} from "../cmStore";
export default {
    mounted() {
      this.fetchData();
    },
    methods: {
        async fetchData() {
            await this.$store.dispatch(SET_CM_ITEMS);
            this.isLoading = false;
        },
    },
    computed: {
        itemsList() {
            return this.$store.getters.CM_ITEMS;
        },
    },
    components: {
    
    },
};
</script>

A component that includes a list and shows elements side by side - Index

<template>
 <div class="row" style="width:100%;">
     <div class="col-sm-3">
            <h2>CM MAIN</h2>
        
            <list />
      
            
     </div>
    <div class="col-sm-9">
        <div >

            {{element}}
        </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import list from '@/components/flm/cm/main/list.vue'
// @ is an alias to /src
axios.defaults.withCredentials = true;
import {SET_CM_ITEMS} from "../cmStore";
export default {
    data: function() {
        return {
            data:{},
        
           
        };
    },
    mounted() {

    },
    methods: {
            async fetchData(id) {
            console.log(id);
            await this.$store.dispatch(SET_CM_ITEMS,{id:id});
            this.isLoading = false;
            

        }   
             
      
       
       
    },
    components: {
        list
    },
    computed: {
        paginate() {
           return this.fetchData(this.$route.params.id);
        },  
        element()
        {
            if(this.$store.getters.CM_ITEMS)
            {
                let items = this.$store.getters.CM_ITEMS;
                return items[0];
            }
             
        }
    },
    props: {
        id: {
            required: true
        },
    },
};
</script>

Pagination doesn't work at first on launch, but after opening the vue debug tool in chrome it starts working
Why?
And yes, everything happens on one page, i.e. we are in the index router points to Index