title: New Vue components being created at the bottom of the loop
body: <p>I have a component called <code>post-index</code> which shows all the posts. Within it, I have another component which handles individual post, namely, <code>post-view</code>. Inside it, I have another component which handles likes and dislikes. It is called <code>post-like</code>.</p>
  
  <p>Everything works fine as expected but if I add a new post to the existing array (using <code>.unshift()</code>) everything misbehaves.</p>
  
  <p>For eg:</p>
  
  <p>It's working like a charm.
  <a href="https://i.stack.imgur.com/QW50a.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QW50a.png" alt="Working normally"></a></p>
  
  <p>When I create a new post
  <a href="https://i.stack.imgur.com/YA47E.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YA47E.png" alt="enter image description here"></a></p>
  
  <p>See? It's highlighting the like button even though it is not been liked by the user. After many trials I have found that it is duplicating the like value (true or false) from the below post. Which means the component is not being created for the new post, instead at the bottom. Is there any solution for this problem?</p>
  
  <p>All I have inside the <code>post-like</code> component is a data property called <code>like</code>. Which handles the like and dislike actions.</p>
  
  <p>If I am not wrong, Vue is re-rendering from the top and adding new components to the bottom. How can I solve this issue?</p>
  
  <p>Please ask if you want any other information about this issue.</p>