Nuxt перерисовывает компонент по событию onclick

Вопрос заключается в следующем у меня есть Nuxt компонент Внутри него есть элементы на которых установлен онклик @click

Если мы просто юзаем сайт прыгаем по роутам то все работает отлично Но если мы перезагрузили страницу или вошли на сайт по прямой ссылке первый онклик (Первый раз когда жмем на элемент) происходит перерисовка компонента а потом все как обычно нормально

Выложу темплейт возможно кто то знает как решить этот вопрос, просто у меня Accordion схлопывается в этот момент и это не очень круто выглядит

<template lang="pug">
    div
        .filter
            .container
                .row
                    .col
                        .filter_top
                            | Explore secret hotel rates up to 40% off
                        .filter_body
                            .row
                                .col
                                    .dropdown_custom
                                        button.accordion-button(type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample")
                                            template(v-if="locationStr == ''" )
                                                template(v-if="getParamsJson.location != undefined" )
                                                    | {{currentLocationInFilter.name}}

                                                template(v-else)
                                                    | Where’re you go

                                            template(v-else)
                                                | {{locationStr}}

                                        div(class="collapse" id="collapseExample")
                                            ul#accordionExample.accordion
                                                li.accordion-item(v-for="location in locations")
                                                    template(v-if="currentLocationInFilter.parent_selected == location.location_id" )
                                                        button.accordion-button.collapsed.active(type="button", data-bs-toggle="collapse", :data-bs-target="'#collapse_location_' + location.location_id", aria-expanded="true", :aria-controls="'collapse_location_' + location.location_id")
                                                            | {{location.name}}
                                                    template(v-else)
                                                        button.accordion-button.collapsed(type="button", data-bs-toggle="collapse", :data-bs-target="'#collapse_location_' + location.location_id", aria-expanded="true", :aria-controls="'collapse_location_' + location.location_id")
                                                            | {{location.name}}

                                                    ol(:id="'collapse_location_' + location.location_id" data-bs-parent="#accordionExample").accordion-collapse.collapse
                                                        li(v-for="sublocal in location.child")

                                                            .ifButtonCurrent(v-if="sublocal.location_id == storeQueryCurrent.location")
                                                                label
                                                                    input(type="radio" name="location" checked="checked" :value="sublocal.location_id" @click="getParamsJson.location = sublocal.location_id; locationStr = sublocal.name; currentLocationInFilter.parent_selected = location.location_id;")
                                                                    | {{sublocal.name}}
                                                            .ifButtonCurrent(v-else)
                                                                label
                                                                    input(type="radio" name="location" :value="sublocal.location_id" @click="getParamsJson.location = sublocal.location_id; locationStr = sublocal.name; currentLocationInFilter.parent_selected = location.location_id;")
                                                                    | {{sublocal.name}}

                                .col
                                    nuxt-link(:to="{ path: 'search', query: { location: getParamsJson.location }}") GO TO QUERY JSON

                        .filter_footer


</template>

<script>
import axios from "axios";

export default {
    name: "ComponentFilterQuery",

    fetch () {
        let requestPageApiLocations =  axios.get('http://localhost:3005/locations/').then((res) => {
            this.$store.commit('filterLocations', res.data)
        }).catch((error) => {
            console.log(error)
        })
        return requestPageApiLocations
    },
    computed : {
        locations() {
            // Вернули Все Локации из стора в Разметку
            return this.$store.state.locations
        },
        currentLocationInFilter() {
            let locationsInStore = this.$store.state.locations
            let locationInQuery = this.$store.app.context.query.location
            let locationCurrentName
            let locationParentCurrentId
            for (let i = 0; i < locationsInStore.length; i++) {
                for (let i2 = 0; i2 < locationsInStore[i].child.length; i2++) {
                    if (locationsInStore[i].child[i2].location_id == locationInQuery) {
                        // Вычисляем имя Дочерней локации
                        locationCurrentName = locationsInStore[i].child[i2].name
                        // Вычисляем идентификатор Региона
                        locationParentCurrentId = locationsInStore[i].location_id
                    }
                }
            }
            console.log(locationCurrentName)

            return {
                "name" : locationCurrentName,
                "parent_id" : locationParentCurrentId,
                "parent_selected" : locationParentCurrentId
            }
        }
    },

    data() {
        let storeQuery = this.$store.app.context.query
        // console.log(this.$store.state.locations)


        let variableGetParamsJson = {
            "location": storeQuery.location,
            "date": "2022-07-24",
            "price": [100, 2000],

            "tags": [1, 2, 3],
            "types": [1, 2],

            "order": ["id", "desc"],
            "limit": 2,
            "offset": 1,
        }

        return {
            storeQueryCurrent: storeQuery,
            getParamsJson: variableGetParamsJson,
            locationStr: '',
        }
    },
    mounted() {

    }
}
</script>

<style scoped>
    .accordion-button.active {
        background-color: red;
    }
</style>

Ответы (1 шт):

Автор решения: Сергей Гончарь-Лысенко

Оказалось проблема была в том что Вью брал разметку из SSR и все решилось с помощью тега no-ssr

→ Ссылка