Vue / Vue 2 – Forcing rendering in case of object structure change

Let’s say we have a defined object or object array. If you change the structure of an object you may be surprised to see that the change will be not visible in html. Vue in case of object structure change doesn’t refresh automatically DOM structure of HTML eg. v-for. This issue is described very well on Below I present one solution to avoid this problem. In our sample we use two arrays of objects. The solution is to add instructions to force re-rendering: vm. $forceUpdate ();

Demo is on

Running sample:

Source code:



September 27th, 2017

  • My husband and i have been now more than happy when Chris managed to deal with his research via the ideas he had from your very own web pages. It is now and again perplexing just to happen to be handing out concepts which usually some others may have been trying to sell. And we all acknowledge we now have the writer to give thanks to for this. The entire explanations you have made, the simple web site navigation, the friendships your site aid to promote – it is many spectacular, and it’s facilitating our son in addition to us consider that that situation is enjoyable, which is certainly especially pressing. Thank you for the whole lot!.

  • I wish to point out my passion for your generosity supporting women who really need help with your issue. Your personal dedication to getting the solution across had been extremely insightful and have surely permitted somebody like me to arrive at their goals. Your new interesting help indicates a great deal to me and further more to my peers. With thanks; from each one of us..