How to change locale locally in a component

[nootey]

Hey,
I've setup i18n-next (Vue 3) and it works perfectly, for changing global scope locale. I'm using a Dropdown to change the locale and save it in localStorage.

I have a seperate component, in which I'd like to change the local scope locale, but it always ends up changing the global scope locale as well. Am I doing something wrong? Here are the snippets of code:

i18n.js file:

import {createI18n} from 'vue-i18n/index'

const messages = { ... }

const i18n = createI18n({
    locale: localStorage.getItem('locale') ?? "sl",
    fallbackLocale: 'en',
    messages,
})

export default i18n

the dropdown in the component, where I change locale globally:

<Dropdown class="dropdown" v-model="$root.$i18n.locale" :options="locales" optionLabel="name"
                      optionValue="locale" @change="updateLocalStorage"></Dropdown>

the dropdown in the component, where I want to change locale locally:

<Dropdown class="dropdown" v-model="$i18n.locale" :options="locales" optionLabel="name"
                  optionValue="locale" @change="updateLocalStorage"></Dropdown>

Thanks for any help.

[newproplus]

In my code $i18n is {}, i18n is not exist,I wonder how to change locale in .vue file,and how to get all the locale.