آپدیت نشدن dom با درخواست به api

سلام
امروز به مشکل عجیبی برخوردم

من با vuex به api درخواست میزنم و دیتاهارو میگیرم.(تو vue dev tool و network tab دیتا رو میبینم و اروری نمیگیرم)
ولی دیتا ها رندر نمیشه و dom آپدیت نمیشه

این تصویر رو ببینید: وقتی رو سرچ باکس کلیک میشه و دیتا searchBox ترو میشه دام آپدیت میشه و اطلاعات نمایش داده میشه

واقعا نمیدونم مشکل از کجاس؟

vuex:

export default new Vuex.Store({
    state: {
        socials: [],
        info: {}
    },
    mutations: {
        SET_SOCIALS(state, val) {
            state.socials.push(val)
        },
        SET_INFO(state, val) {
            state.info.title = val.title
            state.info.number = val.number
            state.info.about = val.about_me
            state.info.email = val.mail
        }
    },
    actions: {
        setSocials({commit}) {
            Http.get("/config")
                .then(response => {
                    let social = response.data.socialmedia;
                    for (const [key, value] of Object.entries(social)) {
                        commit('SET_SOCIALS', `https://${value}`)
                    }
                })
        },
        setInfo({commit}) {
            Http.get("/config")
                .then(response => {
                    let res = response.data.site.info;
                    commit('SET_INFO', res)
                })
        }
    },
    getters: {
        getSocials: state => state.socials,
        getInfo: state => state.info
    }
})

Header.vue:

  import {mapGetters} from 'vuex'

    export default {
        name: "Header",
        mixins: [mixins],
        data() {
            return {
                searchBox: false
            }
        },
        watch: {
            searchBox(val) {
                if (val) {
                    this.$nextTick(() => {
                        this.$refs.searchInput.focus();
                    });
                }
            }
        },
        methods: {
            closeResult() {
                this.searchBox = false;
            }
        },
        computed: {
            ...mapGetters(['getInfo','getSocials']),
        }
    }

header.vue (template):

                        <ul class="list-unstyled d-flex align-items-center mb-۰ text-white">
                            <li class="pl-۳"><i class="fas fa-phone"></i> <b class="mr-۱">تلفن</b>: <a
                                    :href="`tel:${getInfo.number}`">{{ getInfo.number }}</a></li>
                            <li><i class="fas fa-envelope"></i> <b class="mr-۱">ایمیل</b>: <a
                                    :href="`mailto:${getInfo.email}`" class="roboto">{{ getInfo.email }}</a></li>
                        </ul>
                    </div>
                    <div class="d-none d-md-block">
                        <ul class="list-unstyled d-flex align-items-center mb-۰ text-white" id="social">
                            <li class="pl-۳"><a :href="getSocials[۱]" target="_blank"><i
                                    class="fab fa-telegram-plane"></i></a></li>
                            <li class="pl-۳"><a :href="getSocials[۳]" target="_blank"><i class="fab fa-twitter"></i></a>
                            </li>
                            <li class="pl-۳"><a :href="getSocials[۰]" target="_blank"><i class="fab fa-instagram"></i></a>
                            </li>
                            <li><a :href="getSocials[۲]" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
                        </ul>
                    </div>

از index های سوشال مطمئن هستم و مشکلی وجود نداره.
فقط یک نکته: همون طور ک گفتم دیتاها نمایش داده نمیشه ولی وقتی دیتا رو (همون سوشال) میزارم تو اتریبیوت href بدون مشکل دیتا لود میشه ولی اگ بخوام با {{}} نمایش بدم چیزی نمایش داده نمیشه و با کلیک بر روی سرچ باکس dom آپدیت میشه.

بعد این اکشن هارو تو متود mounted کامپوننت اصلی App.vue dispatch میکنم:

  mounted() {
            this.$store.dispatch('setSocials');
            this.$store.dispatch('setInfo');
}

بعد یک چیز دگ هم فهمیدم ک اگر توی router.js کامپوننت روت اصلی رو به App.vue تغییر بدم دیتا ها بدون مشکل لود میشن ولی دگ خودتون مشکلشو میدونین.

در حال حاضر:

 {
            path: '/',
            component: Index
        },

اگر به App تغییر بدم مشکلی در نمایش وجود نداره ولی خوب دگ نمیشه پیج های دگ رو با این layout َایجاد کنم.

 {
            path: '/',
            component: App
        },

واقعا خیلی عجیبه، تو stackoverflow هم پرسیدم ولی هیچکی نمیدونه

@hesammousavi
@ali.bayat