Why v-model doesn't work with an array and v-for loop?

Question

I got a custom select component, it works with a simple variable, but when used with v-for it won\'t work:

https://jsfiddle.net/7gjkbhy3/19/

Answer 1

v-model and v-for do NOT go together well if v-model is used to an iteration alias w/ a primitive value.

The Vue warns:

You are binding v-model directly to a v-for iteration alias. This will not be able to modify the v-for source array because writing to the alias is like modifying a function local variable. Consider using an array of objects and use v-model on an object property instead.

Therefore using an array of objects each of which has a property for the select value would solve the issue:

WORKING EXAMPLE.

new Vue({
     el: '#app',
     data: {
         sample: 0,
         samples : [{ value: 0 }, { value: 0 }, { value: 0 }]
     }
 })