[1811] [question]Why does the vue plugin work when I connect to the layout and does not work when I connect to the page

I'm using a bootstrap-vue plugin (pagination). If I connect it in a layout, then it works, if I connect the same plugin in the page, then watch does not work

(if you do this, it works)

                                       _layouts\default_

<div v-if="$route.name == 'shops' || $route.name == 'shops-id'">
                <div class="wrap_content">
                    <div class="content">
                        <LeftSide/>

                        <div class="content_catalog">
                            <div class="top_block">
                                <div class="bread">Все магазины</div>
                            </div>
                            <div class="tabs">
                                <ShopsItems/>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

(if you do it, it does not work)

                                      pages\shops.vue

<template>
    <div>
        <div class="wrap_content">
            <div class="content">
                <LeftSide/>

                <div class="content_catalog">
                    <div class="top_block">
                        <div class="bread">Все магазины</div>
                    </div>
                    <div class="tabs">
                        <ShopsItems/>
                    </div>
                </div>

            </div>
        </div>
        <nuxt-child :key="$route.params.id"/>
    </div>
</template>

ShopsItems component that uses pagination. Only the method pageNuxt does not work in it. beforeCreate works correctly and loads the first page

<template>
        <div class="tabs-box">
            <div class="active">
                <div class="shops" v-for="shop in shops">
                    <div class="shop">
                        <nuxt-link :to="'/shop/' + shop.id">
                            <img :src="shop.logo" :alt="shop.name">
                            <div class="address_time">
                                <p class="address">{{shop.street}}</p>
                         </div>
                    </div>
                </div>

                <div class="containerPagination">
                    <b-pagination-nav size="md" align="center" :link-gen="linkGen" :number-of-pages="numberOfPage" v-model="currentPage" />
                </div>
                <br>
            </div>
            <div>
        </div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios';
    import $ from 'jquery';
    const api = 'rest api';
    let currentOffset = 6,
        limit = 1,
        queryParams = {},
        lim = 6;

    export default {
        data() {
            return {
                shops: [],
                currentPage: 1,
                numberOfPage: 1
            };
        },
        methods: {
            pageNuxt () {
                this.currentPage =  this.$route.query.page ? parseInt(this.$route.query.page) : 1;
                currentOffset = lim * (this.currentPage - 1);
                if ( this.currentPage == 1) {
                    currentOffset = 0
                }

                if (this.$route.name == 'shops-id') {
                    queryParams = {
                        town_id: 1,
                        offset: currentOffset,
                        limit: limit,
                        cat_id: this.$route.params.id
                    }
                }else {
                    queryParams = {
                        town_id: 1,
                        offset: currentOffset,
                        limit: limit
                    }
                }
                axios.get(api, {
                    params: queryParams
                }).then((data) => {
                    console.log('currentOffset', currentOffset, 'currentPage', this.currentPage, 'lim', lim );
                    if (data.data.data.length) {
                        this.shops = data.data.data;
                    }
                });
            },
            linkGen(pageNum) {
                if (this.$route.name == 'shops-id') {
                    return {
                        path: '/shops/' + this.$route.params.id + '?page=' + pageNum
                    };
                }else {
                    return {
                        path: '/shops?page=' + pageNum
                    };
                }

            },
            forSelect(par) {
                lim = 6 * par;
                limit = par;
                this.currentPage =  this.$route.query.page ? parseInt(this.$route.query.page) : 1;
                currentOffset = lim * (this.currentPage - 1);
                if ( this.currentPage == 1) {
                    currentOffset = 0
                }
                if (this.$route.name == 'shops-id') {
                    queryParams = {
                        town_id: 1,
                        offset: currentOffset,
                        limit: par,
                        cat_id: this.$route.params.id
                    }
                }else {
                    queryParams = {
                        town_id: 1,
                        offset: 0,
                        limit: par
                    }
                }

                axios.get(api, {
                    params: queryParams
                }).then((res) => {
                    this.shops = res.data.data;
                    var countItem = res.data.count_item;
                    this.numberOfPage = Math.ceil(countItem / lim);
                });
            },
        },
        watch: {
            $route() {
                this.pageNuxt();
            }
        },
        beforeCreate: function () {
            this.$nextTick(function () {
                if (this.$route.name == 'shops-id') {
                    queryParams = {
                        town_id: 1,
                        offset: currentOffset,
                        limit: limit,
                        cat_id: this.$route.params.id
                    }
                }else {
                    queryParams = {
                        town_id: 1,
                        offset: 0,
                        limit: 1
                    }
                }
                axios.get(api, {
                    params: queryParams
                }).then((data) => {
                    this.shops = data.data.data;
                    var countItem = data.data.count_item;
                    this.numberOfPage = Math.ceil(countItem / lim);
                    console.log('currentOffset2', currentOffset, 'currentPage2', this.currentPage, 'lim', lim );

                })
            })
        },
    }
</script>