title: same values on dropdown menu using v-for
body: <p>I'm just starting using Vue.js to do a points counter app and I'm having troubles with v-for loop and dropdown menu.</p>
  <p>I have an array of players in my Vue.js app :</p>
  <pre class="lang-js prettyprint-override"><code>var app = new Vue({
      el: '#leaderboard',
      data: {
          players: [{'name': 'Quentin', 'points': 0}, {'name': 'Kevin', 'points': 0}]
      },
      computed: {
          orderPlayers: function(){
              const compare = (a, b) =&gt; {
                  return a.points - b.points;
              }
              console.log(this.players.sort(compare).reverse());
              return this.players.sort(compare).reverse();
          }
      }
  })
  </code></pre>
  <p>And I am trying to display my elements in a div sorted by number of points like this :</p>
  <pre class="lang-html prettyprint-override"><code>    &lt;div id=&quot;leaderboard-wrapper&quot;&gt;
          &lt;span&gt;Classement :&lt;/span&gt;
          &lt;div id=&quot;leaderboard&quot;&gt;
              &lt;div v-for=&quot;(player, index) in orderPlayers&quot; :key=&quot;index&quot; class=&quot;element&quot;&gt;
                  &lt;span id=&quot;name&quot;&gt;{{ player.name }}&lt;/span&gt;
                  &lt;span id=&quot;points&quot;&gt;{{ player.points }}&lt;i class=&quot;fa-solid fa-star&quot;&gt;&lt;/i&gt;&lt;/span&gt;
                  &lt;div class=&quot;dropdown&quot;&gt;
                      &lt;button class=&quot;dropbtn&quot; onclick=&quot;showDropdown()&quot;&gt;&lt;i class=&quot;fa-solid fa-ellipsis-vertical&quot;&gt;&lt;/i&gt;&lt;/button&gt;
                      &lt;div id=&quot;actionDropdown&quot; class=&quot;dropdown-content&quot;&gt;
                          &lt;a href=&quot;#&quot; @click=&quot;player.points+=2&quot;&gt;A marqué 2&lt;/a&gt;
                          &lt;a href=&quot;#&quot; @click=&quot;player.points +=5&quot;&gt;A marqué 5&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  <p>The problem is when I hit the button &quot;A marqué 2&quot; for Kevin, it is the points counter of Quentin that increment.</p>
  <p>I made some tests and researches and I discover that the &quot;player&quot; value in the #actionDropdown div is the same for the two players. Here, player points on the player Quentin for the two elements.</p>
  <p>Did someone have an idea to fix this problem ?</p>
  <p>Thank you in advance ! :)</p>