nuxt 3 i18n setting locale on locale scope defaulting back to global language

Question

i am trying to set language of i18n inside component so that everything inside will have local i specified inside options. But if i refresh page a couple of times sometime it uses global locale value instead of the one i specified

My component looks like this:

<script setup lang="ts">
import {useI18n} from "vue-i18n";
import {useLocaleStore} from "~/stores/useLocaleStore";
const localeStore = useLocaleStore();
const { t,locale } = useI18n({
    locale: localeStore.user_locale.value

});

const md = t('language_name');
console.log("value:", t('language_name'))
console.log("localeStore locale value:", localeStore.user_locale.value)
console.log("i18n locale value:", locale.value)
</script>

<template>
    <span class="text-red-600"><i>{{md}}</i> page</span>
</template>

and my console logs returns:

value: English
localeStore locale value: sl
i18n locale value: en

any idea why its taking global language instead of the one i specified?

i Followed the docs https://vue-i18n.intlify.dev/guide/essentials/scope.html#local-scope-2