Directive only works with locale messages if useI18n is called in setup

[DerZade]

trafficstars

Reporting a bug?

The v-t only works with local defined messages if useI18n is called in the setup of the component.

This does not work:

<template>
    <h1 class="green" v-t="'local'"></h1>
</template>

<i18n>
{
  "en": { "local": "Local Path works!" }
}
</i18n>

but this does:

<script setup lang="ts">
import { useI18n } from 'vue-i18n';
useI18n()
</script>

<template>
    <h1 class="green" v-t="'local'"></h1>
</template>

<i18n>
{
  "en": { "local": "Local Path works!" }
}
</i18n>

Expected behavior

The directive should resolve local messages without having to call useI18n in setup of component.

Reproduction

https://github.com/DerZade/vue-i18n-directive-unplugin-bug-report

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
    CPU: (2) x64 AMD Ryzen 7 4700U with Radeon Graphics
    Memory: 16.07 GB / 19.54 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 18.16.0 - /usr/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 9.5.1 - /usr/bin/npm
  npmPackages:
    @intlify/unplugin-vue-i18n: ^0.12.3 => 0.12.3 
    @vitejs/plugin-vue: ^4.3.1 => 4.3.3 
    @vue/tsconfig: ^0.4.0 => 0.4.0 
    vite: ^4.4.9 => 4.4.9 
    vue: ^3.3.4 => 3.3.4 
    vue-i18n: ^9.3.0-beta.26 => 9.3.0-beta.26 
    vue-tsc: ^1.8.8 => 1.8.8

Screenshot

No response

Additional context

I was not sure if this should be posted in https://github.com/intlify/bundle-tools/tree/main or here. If this is a unplugin issue, feel free to move it to that repo.

Validations

• [X] Read the Contributing Guidelines
• [X] Read the Documentation
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussions