v-modelをv-forの変数で設定したい

Question

はじめまして。いつもお世話になっています。
vue.jsで、v-modelの使用について詰まっております。

やりたいこと

jsonのkeyと中身を並べて表示、
v-modelを使用し、リアルタイムに値を編集できるようにしたい。

問題点

下記のコードで、{{ key }} {{ opt }} は表示されるのですが、
v-modelにoptを設定することが出来ません。
v-modelにitem.options.foo のように、最後まで指定すれば
動くコードは見たことがありますが、
今回はプロパティが変動するので、動的に扱えればと思っております。
拙い質問ですが、よろしくお願いいたします。

<ul v-for="(item) in myjson">
  <li v-for="(opt, key) in item.options">
    {{ key }}
    {{ opt }}
    <input type="text" v-model="opt">
  </li>
</ul>

myjson: [
    {
        "name": "test1",
        "options": {
            "foo": 100,
            "bar": 200
        }
    },
    {
        "name": "test2",
        "options": {
            "piyo": 5,
            "hoge": 10
        }
    }
]

Answer 1

「opt」は「値」に相当するので受け皿（変数）がないような気がします。
値を出し入れする変数が必要ですので

<input type="text" v-model="item.options[key]">

多分こうではないかと。

Comments

[funmas]

回答ありがとうございます。
その通りでした。値に入れようとしてしまっていたことが原因だったんですね。
いただいた記述方法で無事解決することができました。ありがとうございます！