If you'd like to define translations per-page or per-component you can take advantage with i18n custom block.
You can now define translations using i18n custom blocks in your Vue files:
<script setup lang="ts">const { t } = useI18n({ useScope: 'local'})</script><template> <p>{{ t('hello') }}</p></template><i18n lang="json">{ "en": { "hello": "hello world!" }, "ja": { "hello": "こんにちは、世界!" }}</i18n>or using the Yaml syntax:
<i18n lang="yaml">en: hello: 'hello world!'ja: hello: 'こんにちは、世界!'</i18n>Read more about i18n custom blocks
When you use per-component Translations, you need
t which is exported by useI18n, not $t.
About $t which isn't used in per-component translation, see also "Implicit with injected properties and functions" section of Vue I18n docs.