Pinia state not reactive

Hello guys i'm having an issue with pinia. I want to load settings from api to the frontend app so that i can use those settings on internal pages and on header, footer My App.vue look like

<template>
  <div>
    <Header />
      <RouterView />
    <Footer />

    <!-- Responsive menu modal -->
    <MenuModal />
  </div>
</template>

<script setup>

import { onBeforeMount } from 'vue';
import { RouterView } from 'vue-router'
import Header from '@/components/Header.vue';
import Footer from '@/components/Footer.vue';
import MenuModal from '@/components/MenuModal.vue';
import { useSettingStore } from '@/stores/settingStore';

const { getSettings } = useSettingStore();

onBeforeMount(() => getSettings())

</script>

settingStore.js

export const useSettingStore = defineStore('settings',() => {

    const settings = ref({});

    const getSettings = async () => {
        let response = await axios.get(`/settings`)
        settings.value = response.data.data;
    }

    return { settings, getSettings }
})

the problem is that settings state is available in internal pages but can't access them in <Header /> and <Footer /> Component.