Vue.js dynamic component reload

Question

I have a vue.js app where I use the componenttag with :is="currentView" approach for changing the active view. I have a "state machine" that keeps track of valid transitions from a component to another component depending on some business logic. Sometimes this will tell the vue instance that the new value of currentViewis the same as the old one. If this happens, the component will not be reloaded. Is there any way I can force the component to reload even if the view is the same? That is I want the data to be reloaded, and the lifecycle hooks being executed.

Answer 1

You can add a unique key attribute to your component definition so that it correctly triggers all the component lifecycle methods.

Your component definition should look something like this:

<component :is="view" :key="unique_key"></component>

Helpful links:

Reloading a dynamic component

Vue 'key' api reference