Vue Js Force to Reload Render : vm.$forceUpdate() is a method used in Vue.js to force an update to a component to render without actually making any changes to the data. This is useful for updating the view components dynamically even if none of their data has changed; it can help increase responsiveness and enhance the user experience.
Vue Js force update synatax
this.$forceUpdate();
In the example below, on clicking the button, the number of items increases and the programme runs. $forceUpdate() to force reload the vue component, even if none of the data(item) have changed, and return the item’s updated value.
Vue Js force to reload render | Example
<div id="app">
<button @click="updateItems">Update items</button>
<p>Items: {{ item }}</p>
</div>
<script type="module">
import { createApp } from "vue";
createApp({
data() {
return {
item: 0
}
},
methods: {
updateItems() {
this.item++;
this.$forceUpdate();
}
}
}).mount("#app");
</script>
