Vue - Force Rerendering Of All Components

Question

I've wrote a plugin for Vue and have some issues on rerendering. In fact there is a new filter, which translate a given text by the global defined language. When the language changes, the text should be translated again. Cause there is no event queue for filters here, I want to force all components to rerender themselves, if the language changes. So the filter function would be evaluated new.
I know that I can rerender a component itself with vm.$forceUpdate(). But how can I told the whole Vue component tree to rerender? Cause this only happens, if the user change the language, the performance issues should not be a problem, cause at least the user do not have to reload the whole page and can do this offline. Any suggestions?

Answer 1

You can use a key attribute in the component root. Change it and the component tree will be rerendered.

Per docs (bold is mine):

It can also be used to force replacement of an element/component instead of reusing it. This can be useful when you want to:

• Properly trigger lifecycle hooks of a component
• Trigger transitions

For example:

<transition>
   <span :key="text">{{ text }}</span>
</transition>

When text changes, the <span> will always be replaced instead of patched, so a transition will be triggered.