Get global settings with Vue 3, Laravel, Vuex, axios

I am using Laravel 8, Vue 3 with vuex, axios. I created an API at domain.com/api/settings to store global settings as: app name, store name, store description, ... These parameters are used in many components: MainHeader, MainFooter, child component

API domain.com/api/settings

{"data":[{"name":"app_name","val":"Laravel App"},{"name":"store_name","val":"Golf"},{"name":"store_description","val":"This is meta description"}]}

app.js

import { createApp, onMounted } from 'vue'
import router from './router'
import store from './store'
import MainHeader from './components/layouts/MainHeader.vue'
import MainFooter from './components/layouts/MainFooter.vue'

const app = createApp({})
app.component('main-header', MainHeader)
   .component('main-footer', MainFooter)
app.use(router).use(store).mount('#app')

I can use API in seperated component like this:

resources/js/composables/settings.js

import { ref } from 'vue'
import axios from 'axios'

export default function useSettings() {
    const settings = ref({})    
    const getSettings = async () => {
        let response = await axios.get('/api/settings/')
        settings.value = response.data.data.reduce((obj, item) => (obj[item.name] = item.val, obj) ,{})
    }    
    return {
        settings,
        getSettings,
    }
}

resources/js/components/layouts/MainFooter.vue

<template>
     {{ settings.store_name }}
</template>
<script setup>
import { onMounted } from 'vue'
import useSettings from '../../composables/settings.js'

const { settings, getSettings } = useSettings()
onMounted(getSettings)
</script>

I wrote same code for MainHeader.vue, Contact.vue so the contact page will call API 3 times.

I tried to create js/store/index.js but it is not working

import { createStore } from 'vuex'
import { onMounted, ref } from 'vue'
import axios from 'axios'

export default createStore({
  state: {
     settings: () => {
         const settings = ref({})

         let response = axios.get('/api/settings/')
         settings.value = response.data.data.reduce((obj, item) => (obj[item.name] = item.val, obj) ,{})

        return {
             settings
         }
      }
   }
})