Sometimes, we want to remount a component in Vue.js.

In this article, we’ll look at how to remount a component in Vue.js.

How to remount a component in Vue.js?

To remount a component in Vue.js, we should change the key prop of the component.

For instance, we write

<template>
  <div id="app">
    <my-component :key="componentKey"></my-component>
    <button @click="componentKey = !componentKey">reload</button>
  </div>
</template>

to set the key prop of my-component to componentKey.

And then we add a button to toggle the componentKey between true and false.

As a result, my-component will remount when we change the value of componentKey by clicking the button.

Conclusion

To remount a component in Vue.js, we should change the key prop of the component.