Describe the bug

hi 👋🏼

when used inside a template slot, the <i18n> component, whose path=... attribute contains the fluent identifier, looks up messages in the wrong context.

the <i18n> component looks up messages in the component that defines the slot, instead of the component that actually contains the <i18n> element when filling in the slot.

as a result, component <template> cannot use the messages from the same component. 😥

Reproduction

SomeComponent.vue:

<template>
  <OtherComponent>
    <-- this is the default slot of OtherComponent -->
    <i18n path="test" tag="p">
      <template #placeholder> ... </template>
    </i18n>
  </OtherComponent>
</template>

<fluent locale="en">
test = This should be used: { $placeholder }
</fluent>

OtherComponent.vue:

<template>
  <slot/>
</template>

<fluent locale="en">
test = … but this one is used: { $placeholder }
</fluent>

this also happens when using explicit/named slots, e.g. like this:

<template>
  <OtherComponent>
    <template #default>
      <i18n path="test" tag="p">
        <template #placeholder> ... </template>
      </i18n>
    </template>
  </OtherComponent>
</template>

System Info

$ npx envinfo --npmPackages='vue,fluent-vue,unplugin-fluent-vue'

  npmPackages:
    fluent-vue: ^3.7.1 => 3.7.5 
    unplugin-fluent-vue: 1.4.1 => 1.4.1 
    vue: ^3.5.13 => 3.5.24

Validations

• Read the Contributing Guidelines.
• 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 Discussion.
• The provided reproduction is a minimal reproducible example of the bug.