Recently I was assisting a Gorges developer with a challenging bug in a VueJS application where some of the state value changes were not being recognized, so a related part of the web page was not rendering correctly. We found several calls to this method in the code:
this.$forceUpdate();
This was an immediate red flag! Whenever I see a forced refresh, it tells me that the reactivity mechanism that automatically is triggered by content changes is not working.
Further investigation revealed the problem and there was an associative array field that had an element assignment that was being done using an equals sign using a format list like this:
myObject.prop = 'value';The solution was to switch to an explicit Vue.set() function like this that explicitly triggers the reactivity:
Vue.set(myObject, 'prop', 'value');
There are better blog articles that explain why statements like this are not reactive, but the takeaway to me is that using this.$forceUpdate() is indicative of code smell, and if it is found in code then it may be a hack for a deeper problem.
