by Sai gowtham

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:

App.vue
<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:

App.vue
<template>
  <div id="app">
    <h1>{{Math.random()}}</h1>
    <button @click="update">Force Update</button>  </div>
</template>

<script>
export default {
  methods:{
    update(){
      this.$mount();    }
  }
};
</script>

Top Udemy Courses

JavaScript - The Complete Guide 2020 (Beginner + Advanced)
JavaScript - The Complete Guide 2020 (Beginner + Advanced)
45,614 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
284,472 students enrolled
40 hours of video content
View Course
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
130,921 students enrolled
48.5 hours of video content
View Course