Web Component Fails to Dynamically Update Vue.js i18n Messages in Angular Project

[santhanakrishnanstark]

Vue version

v3.4.14

Link to minimal reproduction

https://stackblitz.com/edit/stackblitz-starters-4hu361?file=src%2Fmain.ts

Steps to reproduce

1. Open the reproduction link
2. Click the toggle button

What is expected?

Once the toggle button is clicked, it should render the web component with the message Hello i18n Working !

What is actually happening?

Once the toggle button is clicked, the vuei18n key message.greet is rendering instead of the actual value.

System Info

No response

Any additional comments?

In Vue the Vue.provide(VueI18n.I18nInjectionKey, i18n.value); suppose to pass the updated i18n.value But it's not passing.
While Using this web component in Angular I'm having this issue. How to pass the updated i18n.value into provide.

[LinusBorg]

I think the problem is that you provide the ref's value, which will not be reactive - you need to pass the ref itself.

- Vue.provide(VueI18n.I18nInjectionKey, i18n.value)
+ Vue.provide(VueI18n.I18nInjectionKey, i18n)

Wether or not that works with vue-i18n I don't know. Manually providing the instance like this is not a normal documented way of usage. Either way, this is not a Vue bug, it's a usage issue for vue-i18n so I'm moving this to discussions.

[santhanakrishnanstark]

I think the provide, inject method is not working with Angular after converting vue component into web component