Element select选择器绑定对象

VUE项目中,Element select选择器之前都是绑定的字符串,像这样的

<!-- html -->
<el-select v-model="ruleForm.region" clearable placeholder="请选择">
  <el-option v-for="item in options" :key="item.code" :label="item.value" :value="item.code"></el-option>
</el-select>

//js
data(){
  return{
    options: dataRang1,
    ruleForm: {
      region: {
        code: "",
        value: ""
      }
      //或 region: {}
    }
  }
},

这样的话,this.ruleForm.region取到的值是字符串,而不是对象
由于一些问题,现在需要把绑定值改成对象,不要字符串,代码如下

<el-select v-model="ruleForm.region" @change="selectChange" value-key="code" clearable placeholder="请选择">
  <el-option v-for="item in options" :key="item.code" :label="item.value" :value="item"></el-option>
</el-select>

但是这样的话有个问题,由于这个下拉选择是在表单(表单项校验非空)中的,如果下拉选择框没有变化过,直接提交时校验非空不会生效
把上面的js代码部分修改为:

data(){
  return{
    options: dataRang1,
    ruleForm: {
      region: null
    }
  }
},

这样写,直接提交时校验非空会生效.
但是如果在页面加载时,需要给this.ruleForm.region.code赋值,需要这样写

this.ruleForm.region = { code: "00003" }