Component Interpolation doesn't work with lists

[TheDutchCoder]

Reporting a bug?

When using YAML lists with tm and rt, you can't look up values with te in the process.

Here's an example:

<template>
  <div v-for="item in tm('items')">
    <p v-if="te(item.hasHTML)>{{ rt(item.name) }}</p>
  </div>
</template>

<i18n lang="yaml">
en:
  items:
    - name: 'foo'
      hasHTML: true
</i18n>

Expected behavior

To be able to still look up if a key exists inside of lists

Reproduction

If you create a template with the nuxt plugin, I'm more than willing to create a repro.

System Info

System:
    OS: macOS 14.2.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 173.25 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.7.0 - ~/.nvm/versions/node/v20.7.0/bin/node
    npm: 10.1.0 - ~/.nvm/versions/node/v20.7.0/bin/npm
  Browsers:
    Chrome: 120.0.6099.199
    Edge: 120.0.2210.121
    Safari: 17.2.1
  npmPackages:
    @vue/eslint-config-prettier: ^8.0.0 => 8.0.0
    vite-svg-loader: ^5.1.0 => 5.1.0
    vue: ^3.3.8 => 3.4.3
    vue-bind-once: ^0.2.1 => 0.2.1
    vue-imask: ^7.3.0 => 7.3.0
    vue-observe-visibility: ^1.0.0 => 1.0.0
    vue-router: ^4.2.5 => 4.2.5
    vue-slider-component: ^4.1.0-beta.7 => 4.1.0-beta.7
    vue-tel-input: ^8.3.1 => 8.3.1

Screenshot

No response

Additional context

I have to say all these breaking API changes are very hard to work with. Instead of being able to just have a string with some HTML in it, we're forced to use an i18n-t component, but we can't even dynamically check if we need that component.

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