In Vue3, I am working on implementing a straightforward localization logic. Whenever the current locale changes, it is essential for each component that can dynamically change its locale to update its state accordingly. Currently, I achieve this by subscribing to an event that triggers the $forceUpdate method on the component:
<script setup>
import { getCurrentInstance, inject } from 'vue';
const $locale = inject('$my-locale-service');
const $t = inject('$my-translate-service');
const instance = getCurrentInstance();
$locale.onChanged(() => instance.proxy.$forceUpdate());
</script>
<template>
<span>{{ $t('foo') }}</span>
<router-link to="page1">{{ $t('bar') }}</router-link>
</template>
The issue arises where $t('foo') gets updated when $forceUpdate() is executed, but $t('bar') does not. It seems like the rendering process halts at the <slot> boundary of components such as router-link.
Is there a way to force a complete re-render of the entire application, including all nested components? I am open to adjusting the content of $t if necessary to achieve reactivity, as long as its signature remains unchanged.
The commonly suggested solutions involving v-if or :key do not work in my case, as they reset all internal states of the component, resulting in blank form fields.