Cannot access custom block messages / per-component translations

[MoodyBones]

Hiya all, we would like to use per-component translations / a custom block in our Nuxt3 project:

• We have global /locales already in use.
• Vue Dev Tools shows the custom block messages but I cannot work out how to access them.
• I logged @intlify/vite-plugin-vue-i18n/messages and found the messages defined in /locales but nothing from the custom block.

Please find screenshots & snippets:

• vue dev tools
  

• component.vue

<i18n>
{
  "en": {
    "pageTitle": "Mission and Vision"
  },
  "de": {
    "pageTitle": "Auftrag und Visionn"
  }
}
</i18n>

<script setup>
import { useI18n } from 'vue-i18n'
import messages from '@intlify/vite-plugin-vue-i18n/messages'

const { t } = useI18n({
  // `locale` inherit from global scope
  inheritLocale: true,
})

console.log(messages)
</script>

• nuxt.config.ts

  intlify: {
    localeDir: 'locales', // set the `locales` directory at source directory of your Nuxt application
    vueI18n: {},
  },

Environment npx nuxi info

------------------------------
- Operating System: `Darwin`
- Node Version:     `v16.14.0`
- Nuxt Version:     `3.0.0-rc.1-27520426.ab3971d`
- Package Manager:  `[email protected]`
- Builder:          `vite`
- User Config:      `buildModules`, `modules`, `css`, `build`, `vite`, `strapi`, `intlify`, `telemetry`
- Runtime Modules:  `@intlify/[email protected]`, `@formkit/[email protected]`, `@nuxtjs/[email protected]`
- Build Modules:    `@vueuse/[email protected]`
------------------------------

[iBobik]

Duplicate: #84