vueで動的に生成したフォームのバインディング

構成

• vue2.61
• vuetify2.26

実現したこと

v-forを使って動的に生成したそれぞれのインプット項目をリアクティブに扱う

無駄にはまったところ

余計なv-modelをつけるとインプットイベントでv-forで展開したインプット項目が初期化されてしまう。

実装したもの

sample.vue

<template>
  <v-container v-for="item in list" :key="item.id"><!-- リアクティブだからといってここに v-model="list"としてはいけない-->
      <v-row>
          <v-col>
              <v-textfield
                  label="ユーザーアドレス"
                  v-model="item.email"
              ></v-textfield>
          </v-col>
          <v-col>
              <v-textfield
                  label="ユーザー名"
                  v-model="item.name"
              ></v-textfield>
          </v-col>
      <v-row>
  </v-container>
</template>

<script>
  export default {
    name: 'sample',
    data: () => ({
      list: [
        {id: 1, email: '[e-mail]', name: 'sample1'},
        {id: 2, email: '[e-mail]', name: 'sample2'}
      ],
    }),
  }
</script>

なんでこんなことでハマったのかと思うところではまった。
バインド対象のオブジェクトを削除したり、バインド対象のオブジェクトをユーザーアクションに紐付けて追加したりし、かつ、インプットイベントに対しては対象オブジェクトの中身をリアクティブに変更できるようにする的な箇所だったので、あれこれ元のリストの更新をリアクティブにやるにはモデルで紐づけてあげなければいけないのでは？と考えたところがハマりポイントだった。
二度同じミスをしないように備忘録として残す。