How to create a translator with dictionaries using Composition API - vuejs3

Question

I'm trying to understand how to use Composition API. In this simple app I'm trying to implement a reactive translator with multiple dictionaries. Basically, what I want to do is to click on a button and change a language on a page. Right now clicking it does nothing.
Here's where I'm stuck, please check it on flems.io
index.html
<div id="app">
<div>Hello: {{ Hello }}</div>
<div>World: {{ World }}</div>
<button #click="changeLangButtonClickHandler">Change lang</button>
</div>
App.js
const App = {
setup () {
const { dictionary, changeLanguage, language } = useTranslator()
return { ...dictionary.value, changeLanguage, language }
},
methods: {
changeLangButtonClickHandler () {
const newLanguage = this.language === 'en' ? 'ru' : 'en'
this.changeLanguage(newLanguage)
}
}
}
Vue.createApp(App).mount('#app')
translator.js
const language = Vue.ref('en')
const dictionaries = Vue.ref({
ru: {
Hello: 'Привет',
World: 'Мир'
},
en: {
Hello: 'Hello',
World: 'World'
}
})
function useTranslator () {
const dictionary = Vue.computed(() => {
return dictionaries.value[language.value]
})
function changeLanguage (lang) {
language.value = lang
}
return { dictionary, changeLanguage, language }
}

Answer 1

The problem is that if you're using return { ...dictionary.value, changeLanguage, language } the ...dictionary.value will cease being reactive. That's why switching to ...dictionary and distionary.Hello works.
on a side note..., you don't even need a useTranslator function, you can just export the functions and variables like this
// private
const dictionaries = Vue.ref({
ru: {
Hello: "Привет",
World: "Мир"
},
en: {
Hello: "Hello",
World: "World"
}
});
// public
export const language = Vue.ref("en");
export const dictionary = Vue.computed(() => {
return dictionaries.value[language.value];
});
export const changeLanguage = lang => {
language.value = lang;
};
The useSomethingSomething() function is helpful if you want to pass aspects of the component or a variable to the function. Or have a stylistic preference.

Answer 2

Here's a working version.
I replaced <div>Hello: {{ Hello }}</div> with <div>Hello: {{ dictionary.Hello }}</div> in index.html
And also replaced { ...dictionary.value, changeLanguage, language } with return { dictionary, changeLanguage, language } in setup function
The issue had something to do with how reactivity system works