How to use component interpolation for array (multiple) translations

[dword-design]

Clear and concise description of the problem

I have a list of paragraphs that I want to translate and render each one with a <p>. But some have a link in it that I want to inject via component interpolation like this:

// en.js
{
  paragraphs: [
    'foo bar {link}',
    'another paragraph',
  ],
}

// index.vue
<!-- how to render this for each paragraph -->
<i18n-t tag="p" keypath="paragraphs">
  <template #link><a href="link" /></template>
</i18n-t>

It is possible to get the array of translations via $tm, but how to interpolate each translation?

Suggested solution

Maybe there is already a solution that I don't know of. Can I maybe iterate over $tm and interpolate each translated string individually?

Alternative

No response

Additional context

No response

Validations

• [X] Read the Contributing Guidelines
• [X] Read the Documentation
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.