No transaltion for nested or child components

Hello, thank you for your work. I’m trying to use the vue-i18n-next with vue 3 but it does not seem to work for nested components (or child component).

vue & vue-i18n version

• vue: 3.0.0-beta.1
• vue-i18n: 9.0.0-alpha.16

Steps to reproduce

I tried codesandbox.io but there are some issues with vue 3 import, so here is the complete list of files to reproduce the issue.

In the App wrapper view, there is a i18n text which works and an other component Login which also use i18n. But i18n only works for the wrapper container and not for the login view.

File App.vue

<template>
    {{t("login.title")}}
    <br/>
    does it works for login ?
    <Login></Login>
</template>

<script>
        import {useI18n} from "vue-i18n";
	import Login from "./components/Accounts/Login";

	export default {
		name: 'App',
		components: {
			Login
		},
		setup() {
			return useI18n()
		}
	}
</script>

<style>

</style>

File Login.vue

<template>
<div>
    {{ t("login.title") }}
</div>
</template>

<script>

	export default {
		name: 'Login',
		components: {
		}
	}
</script>

<style lang="scss">
</style>

File main.js

import {createApp} from 'vue'
import App from './App.vue'
import router from "./routes/routes";
import i18n from "./i18n";

const app = createApp(App);

app.use(router);
app.use(i18n);

app.mount('#app')

File i18n.js

import {createI18n} from 'vue-i18n'

const i18n = createI18n({
	locale: 'en',
	globalInstall: true,
	messages: {
		en: {'login.title': 'test'}
	}
})
export default i18n;

What is Expected?

I expect to translate the key inside the login view also and nested children.

What is actually happening?

Only the translation inside App.vue works, the translate for Login.vue does not work.

Screenshots

• UI :
• Console :

[kazupon]

@janein Thank you for your feedback!

Hmm 🤔 we want to use it globally, it’s calling useI18n every time in setup, it’s tedious task. I’ll try to resolve this issue with mechanism to simplify it.

[janein]

@houssemFat I just ran into the same issue and wondered if that’s really the way to go. It just feels wrong to do the same thing in every single component which was a single line for the whole application in vue 2.

@kazupon I guess there is no “cleaner” or smarter way to handle this? In this case I think it would be nice to explicitly write this down in the docs. Was a litle bit confusing for me - I was thinking I was doing something wrong until I found this issue.