【Nuxt.js/Vue.js v2】v-for内で配列の要素をv-modelに使用したい

v-for内で取り出される要素を直接v-modelに使用してみる

<div v-for='(item, index) in itemList' :key='index'>
  <input v-model='item' placeholder=''>
</div>

一見問題なさそうですが、以下のエラーメッセージが表示されます。

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.

Google翻訳：
v-modelをv-for反復エイリアスに直接バインドしています。エイリアスへの書き込みは関数のローカル変数の変更に似ているため、これはv-forソース配列を変更できません。オブジェクトの配列を使用することを検討し、代わりにオブジェクトプロパティでv-modelを使用してください。

・・・ つまり、v-forで反復中の要素はコピーなので、元の配列を変更することができないということです。

indexを使用して元の配列の要素を直接参照するよう変更

以下のようにすることでエラーが解消する。

<div v-for='(item, index) in itemList' :key='index'>
  <input v-model='itemList[index]' placeholder=''>
</div>