Translating with Composition API outside of template tags, does not load the right locale

[fl0wo]

Reporting a bug?

I'm using Astro + Vue and vue-i18n.

When translating using composition api, inside the "script setup" block, seems that Vue fallbacks to english locale for some reason.

After 10ms on load page (basically onMounted or onCompleted) the translation function uses the right locale fetched from the url.

But, after those 10ms, only the t('a') call inside the template is reactive, while the const variable in the setup script does not update.

Any way I could find a work-around for this?

<script setup lang="ts">

import {useI18n} from "vue-i18n";

const {t} = useI18n({
  useScope: 'global',
});

const audienceSizeLabels = {
  "a": t('a'),
  "b": t('b'),
};

</script>
<template>
{{t('a')}} <!-- this is translated -->
{{audienceSizeLabels['a']}} <!-- this is not (fallbacks to en locale) -->
</template>

Expected behavior

I'd expect to find a way to make the object reactive to locale changes.

Reproduction

<script setup lang="ts">

import {useI18n} from "vue-i18n";

const {t} = useI18n({
  useScope: 'global',
});

const audienceSizeLabels = {
  "a": t('a'),
  "b": t('b'),
};

</script>
<template>
{{t('a')}} <!-- this is translated -->
{{audienceSizeLabels['a']}} <!-- this is not-->
</template>

System Info

System:
    OS: macOS 14.2.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 398.58 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
    Yarn: 1.22.21 - /opt/homebrew/bin/yarn
    npm: 10.8.1 - ~/Library/pnpm/npm
    pnpm: 9.5.0 - ~/.nvm/versions/node/v20.11.0/bin/pnpm
  Browsers:
    Chrome: 127.0.6533.100
    Safari: 17.2.1
  npmPackages:
    vue: ^3.4.31 => 3.4.37 
    vue-i18n: ^9.13.1 => 9.13.1 
    vue-tsc: ^2.0.26 => 2.0.29

Screenshot

No response

Additional context

No response

Validations

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

[kazupon]

Thank you for your reporting!

Unfortunately, I am not familiar astro.
Could you provide a minimum reporoduction, e.g. using stackbliz? 🙏

[github-actions]

Thank you for your feadback!
Would you be able to provide a reproduction 🙏

More info

Why do I need to provide a reproduction?

Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making.

What will happen?

If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritise it based on its severity and how many people we think it might affect.

If Status: Need More Info labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), we'll close them. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it.

How can I create a reproduction?

We have a couple of templates for starting with a minimal reproduction:

👉 Reproduction mininal starter
👉 Reproduction starter with unpluguin-vue-i18n

A public GitHub repository is also perfect. 👌

Please ensure that the reproduction is as minimal as possible.

You might also find these other articles interesting and/or helpful:

• The Importance of Reproductions
• How to Generate a Minimal, Complete, and Verifiable Example