Use pluralization in component interpolation.

[doudou]

Clear and concise description of the problem

We should use pluralization in component interpolation, but there's no usage document found. And I checked the source code found it not supported yet.
This is a simple example below:
<i18n path="total-items" tag="p"> <span class="text-info">{{ this.selectedLength }}</span> </i18n>
The corresponding message is like:
{ 'en-US': { 'total-items': 'total {n} item | total {n} items' } }
The text should be changed according to the "this.selectedLength" variable.

Suggested solution

These are the choices solution:

1. Add new props to the "i18n" component such as plural="true" and params="{ n: xxx }"
2. Add a new component called "i18n-plural" with the prop params="{ n: xxx }"

Alternative

No response

Additional context

No response

Validations

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