title: v-for loop. i will get same value at each checkbox
body: <p>i'm going to show a loop for user's favourite music genres. but i want to read them from a property inside my Vue instance. here is my code:  </p>
  
  <pre><code>&lt;div id="app"&gt;
      &lt;form method="post" action=""&gt;
          &lt;fieldset&gt;
              &lt;legend&gt;Genres&lt;/legend&gt;
              &lt;!-- Item in Collection --&gt;
              &lt;div v-for="genre in genres"&gt;
                  &lt;input type="checkbox" v-model="selectedGenres" value="genre"&gt; {{genre}}
              &lt;/div&gt;
          &lt;/fieldset&gt;
          &lt;input type="submit" value="submit"&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
      var vm = new Vue({
         el: '#app',
         data: {
             genres: ['jazz', 'pop', 'blues', 'classic', 'country'],
             selectedInterests: []
         }
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>but at the end i will get following image and value attribute of checkboxes will not change! why i will get same values at each checkbox?  </p>
  
  <p><a href="https://i.stack.imgur.com/sxy7S.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sxy7S.png" alt="same values at each checkbox"></a></p>