When you need to force an update you can either reload or re-render. Is it possible in Vue.js? how?. It is possible to re-render update in Vue.js. We will see how to re-render or reload in Vue.js. There is a simple way. You don’t have to create any variables for this. Just do:

vm.$forceUpdate();

Another method is to put all the properties which failed to refresh automatically into computed properties. Expressions are very convenient in templates but they must be used for simple operations. If you put too much complicated logics in the template it will become fat and hard to maintain. For any complex logics you have to use computed property.

 <div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>

</div>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
   computed: {
   // a computed getter
   reversedMessage:function () {
   // `this`points to the vm instance
   return this.message.split('').reverse().join('')
    }
  }
})

Result of this will be:

Original message:“Hello”
Computed reversed message: “olleH”

Here the computed property is reversedMessage. The getter function for the property will be the function we provided. vm.reversedMessage:

console.log(vm.reversedMessage)
// => 'olleH'
vm.message =
'Goodbye'
console.log(vm.reversedMessage)
// => 'eybdooG'

Vue.js is aware that the value of vm.reversedMessage is dependent of the value of vm.message. Therefor Vue.js will update any bindings that depend on vm.reversedMessage when vm.message changes.