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

I don't like the idea of having to change the view model to resolve a framework design constraint. What if the model is to be sent to your backend via an API call? It would involve an additional step of having to mutate the model.

My solution to this was to create a Vue component that boxes the value at each array index into an object that can be referenced within it's slot. It then reacts to the data-changing by updating the array at the specified index via a watcher.

boxed-value.vue

Example