How to force update the Vue component to re-render

In this tutorial, we are going to learn about how to force update the vue component to re-render or reload with an updated UI.

Vue components automatically re-render when a component state or props is changed. like a simple state change may re-render the component with a new UI (User interface).

In some cases, the vue reactivity system doesn’t enough to detect the dom changes, so that we need to force update the vue components to re-render.

The forceUpdate method

Vue offers us a built-in method called forceUpdate(), by using this method inside vue instance we can force update the component.

Let’s see an example:

<template> <div id="app"> <h1>{{Math.random()}}</h1>  <button @click="update">Force Update</button> </div> </template> <script> export default { methods:{ update(){  this.$forceUpdate(); } } }; </script>

In the above example, we have attached an update method to the button element.

Inside the update method we have added a this.$forceUpdate() method, so that when we click on a button, it will re-render the component with a new random number.

Using the mount method

The mount method is used to manually connect the vue instance to the dom, which will trigger the component to re-render.

Here is an example:

<template> <div id="app"> <h1>{{Math.random()}}</h1>  <button @click="update">Force Update</button> </div> </template> <script> export default { methods:{ update(){  this.$mount(); } } }; </script>