Scoping of i18n blocks in components

[rubenduiveman]

I have multiple components with one or more <i18n> blocks, and I noticed what I think is a scoping issue (or at least not clear from the documentation).

What I see:

1. I load a component (ComponentA). All its translations in i18n blocks are added to the root i18n object. It has a "title" translation.
2. I load a second component (ComponentB). All its translations in i18n blocks are added to the root i18n object. It also has a "title" translation. Existing translations are overwritten.
3. ComponentA now displays the title from ComponentB.

What I expected:

1. I load a component (ComponentA). All its translations in i18n blocks are added to a scoped section in the root i18n object. It has a "title" translation.
2. I load a second component (ComponentB). All its translations in i18n blocks are added to a scoped section in the root i18n object. It also has a "title" translation, but it won't overwrite the "title" translation of ComponentA since both i18n blocks are scoped.
3. ComponentA and ComponentB display their own titles.

Possible solutions (feature request):

1. Scope i18n blocks in components by default (breaking change)
2. Support <i18n scoped> (my preferred solution)

In any case, I feel the documentation could be more explicit on the current behavior.

[ballonura]

Same problem and agree with your possible solutions

[kazupon]

vue-i18n-loader@v2 or later, default scoepd.