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>