Vue i18n needs to be refreshed to change language

1. I’m using a child Locale component imported into a parent Header component:

<Locale />
import Locale from '@/components/Locale/index.vue';

2. Below is the code for the child Locale component:

<template>
    <div class="locale">
        <img
            @click="toggleMenu()"
            src="@/assets/svgs/icon_locale.svg"
            class="icon localeBtn"
        />
    </div>

    <div v-show="isLocale" class="text-gray-500 right-8 px-2 dropdown">
        <div v-for="(item, index) in locales" :key="index" @click="setLocale(item)">
            {{ item.label }}
        </div>
    </div>
</template>

<script setup lang="ts">
import { locales } from '@/config/constants/locale.ts';
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { useStore } from 'vuex';

const store = useStore();
const isLocale = ref(false);

const toggleMenu = () => {
    isLocale.value = !isLocale.value;
};

function setLocale(locale) {
    store.commit('system/SET_LOCALE', { lang: locale.name });
}

</script>

3. The data iterated over with v-for is the following array:

export const locales = [
{
name: ‘kr’,
label: ‘Korean’,
},
{
name: ‘en’,
label: ‘English’,
},
];

4. Therefore, I’m storing the selected language in the store by passing a string argument:

import makeLocale from '@/locale';
import { getItem, setItem } from '@/utils/localStorage';

export default {
namespaced: true,
state: {
locale: getItem('locale') || 'kr',
},
getters: {},
mutations: {
SET_LOCALE(state, { lang }) {
state.locale = lang;
setItem('locale', lang);
makeLocale.global.locale = lang;
},
},
actions: {},
};

5.makeLocale.global.locale = lang; Because of the code
This code creates a createI18 object in the selected language.

import { createI18n } from 'vue-i18n';
import en from './modules/en';
import kr from './modules/kr';
import { getItem } from '@/utils/localStorage';
import { locales } from '@/config/constants/locale';

export default createI18n({
locale: getItem('locale') || locales[0].name,
messages: {
kr,
en,
},
legacy: false,
});

6. We then register this file globally in main.ts:

import makeLocale from '@/locale';
app.use(makeLocale);

7. Below is the code for a child component using the language pack

<div class="mb-2">{{ t('myWallet.cautionSub') }}</div>

import { useI18n } from 'vue-i18n';
const { t } = useI18n();

===> But the selected language changes only after refreshing the page.

What part of the code is wrong if I want to change the language without refreshing?