Vue+ElementUI select中V-model数据修改

今天遇到一个问题，浪费了很长时间才解决，虽然问题解决了，但并没有理解真正的原理。
问题描述：
页面结构是由2层循环遍历出来，其中有el-select，v-model绑定的值是第一层循环出的子项的attention属性。为了给下拉框设置初始值，在created中，遍历数组，给每一个元素添加attention属性，并赋值为其子数组的第1项的title值。使用此方法设置后，当改变下拉框选项时，无法更改。
HTML结构：

<el-form
    :model="ruleForm"
    :rules="rules"
    ref="ruleForm"
    class="demo-ruleForm"
>
    <el-form-item label="时间" prop="surveyTime" class="surveyTime">
         <el-date-picker
            :picker-options="pickerOptions"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            v-model="ruleForm.surveyTime"
            style
          >
         </el-date-picker>
    </el-form-item>
    <div
      class="satisfaction_el_form_item"
      style="overflow-y: scroll;
      overflow-x: hidden;
      width: 100%;height: 5rem;"
    >
          <div
            class="satisfaction_el_form_item_children"
             v-for="(item,parentIndex) in ruleForm.satisfactionData"
             :key="item.objectId"
           >
              <p v-if="item.length !== 0">{{item.title}}
                  <span
                    v-for="(value,i) in totalScores"
                    v-if="i === parentIndex"
                    :key="i"
                  >{{value}}分</span>
              </p>
              <el-form-item
                  label="总体得分:"
                  :prop="'satisfactionData.'+ parentIndex +'.score'"
                  :rules="rules.totalScore"
              >
                  <el-input type="text" v-model="item.score" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item
                  v-for="(items,index) in item.subitemList"
                  :prop="'satisfactionData.'+ parentIndex +'.subitemList.' + index + '.score'"
                  :key="items.objectId"
                  :label="items.title +':'"
                  :rules="rules.score"
               >
                  <el-input type="text" v-model="items.score" auto-complete="off"></el-input>
               </el-form-item>
               <el-form-item
                  v-if="item.subitemList.length !== 0"
                  label="重点关注:"
                  :prop="'satisfactionData.' + parentIndex + '.attention'"
                  :rules="[{ required: true, message: '请选择重点关注对象', trigger: ['blur','change'] }]"
               >
                   <el-select placeholder v-model="item.attention" @change="changeSel(item,parentIndex)"> 
                     <el-option
                      v-for="val in item.subitemList"
                      :key="val.objectId"
                      :label="val.title"
                      :value="val.title"
                     >
                     </el-option>
                   </el-select>
                </el-form-item>
           </div>
     </div>
</el-form>

以下是从后台获取到的数据

let val = [ {
              "title": "外观",
              "subitemList": [
                  {
                      "title": "外观1",
                      "subitemList": []
                  },
                  {
                      "title": "外观2",
                      "subitemList": []
                  }
              ]
          },
          {
              "title": "教育",
              "subitemList": [
                  {
                      "title": "教育1",
                      "subitemList": []
                  },
                  {
                      "title": "教育2",
                      "subitemList": []
                  },
                  {
                      "title": "教育3",
                      "subitemList": []
                  },
                  {
                      "title": "教育4",
                      "subitemList": []
                  },
                  {
                      "title": "教育5",
                      "subitemList": []
                  }
              ]
          },
          {
              "title": "服务",
              "subitemList": []
          },
        }]

data数据：

data(){
    return {
      ruleForm: {
        surveyTime: new Date(),
         satisfactionData: [],
      rules: {
        surveyTime: [
          { required: true, message: "请输入调查时间", trigger: "blur" }
        ],
        score: [{ validator: checkScore, required: true, trigger: "blur" }],
        totalScore: [
          { validator: checkTotalScore, required: true, trigger: "blur" }
        ]
      },
    }
}
1、以上代码，可以实现下拉框的实现切换效果，但初始进入的时候，下拉框没有默认值，所以添加下面代码JS代码（1），给select框设置默认值

JS代码（1）如下：

//此处给this.ruleForm.satisfactionData数组的每一项添加attention属性，并赋值为数组每一项中子项数组subitemList第一项的title，即item.subitemList[0].title。
async created() {
  this.ruleForm.ssatisfactionData = this.val;
  this.ruleForm.satisfactionData.forEach(item => {
      if(item.subitemList.length !== 0) {
        item.attention = item.subitemList[0].title;
      }
  });
  },
methods:{
  changeSel(value,parentIndex){
      for(let i in this.ruleForm.satisfactionData){
        if(i == parentIndex){
          this.ruleForm.satisfactionData[i].attention = value.attention;
          this.$set(this.ruleForm.satisfactionData[i],"attention",value.attention)
        }
      }
    }
}

虽然添加上面代码后，可以实现给select设置默认值，但当选择其他选择时，v-model所绑定的值不会更改，且试图不会改变，一直会显示默认值。尝试给select添加change事件也是不能生效。查了网上的资料，应该是因为v-model绑定值做修改后，视图没有刷新，是因为v-model所绑定的值，并没有在试图中所定义。所以对代码再次做了修改，如下：

//对data以及js代码进行修改
data(){
  return {
    value:[] //在data中新增value值
  }
}，
created(){
  this.ruleForm.ssatisfactionData = this.val;
  this.ruleForm.satisfactionData.forEach(item => {
      if(item.subitemList.length !== 0) {
        item.attention = item.subitemList[0].title;
   //在此处把每一个子项中subitemList的第一项title值push到value中
        this.value.push(item.subitemList[0].title)
      }
  });
}，
methods:{
  changeSel(value,parentIndex){
 //此处就不需要了
      // for(let i in this.ruleForm.satisfactionData){
      //   if(i == parentIndex){
      //     this.ruleForm.satisfactionData[i].attention = value.attention;
      //     this.$set(this.ruleForm.satisfactionData[i],"attention",value.attention)
      //   }
      // }
    }
}
//对HTML结构修改
<el-form-item
    v-if="item.subitemList.length !== 0"
    label="重点关注:"
    :prop="'satisfactionData.' + parentIndex + '.attention'"
    :rules="[{ required: true, message: '请选择重点关注对象', trigger: ['blur','change'] }]"
>
<!-- 给selectv-model绑定为value -->
    <el-select placeholder v-model="value[parentIndex]" @change="changeSel(item,parentIndex)"> 
         <el-option
               v-for="val in item.subitemList"
               :key="val.objectId"
               :label="val.title"
               :value="val.title"
         >
         </el-option>
     </el-select>
</el-form-item>

更改之后，不但设置默认值成功了，而且还可以正常切换其他选项。
第一次写这个，文中如有错误及改进之处，欢迎在评论中指出谢谢。