el-select 改变选项时动态修改页面值，遇到问题。

我再页面上定义一个el-select，想实现根据 el-select 选择不同的值改变页面中对应控件的值。
在页面上定义了存储值的对象 createForm. 在js中利用 changeLogisticsUser 函数根据el-select选项获取到logisticsUser对象，然后给createForm.logisticsUser 对象赋值。
我想实现的是改变logisticsUser对象后页面中对应的控件值也改变。
但是现在的效果是：改变el-select的选项值(选中 新浪)后页面控件值没有变化，然后再次改变el-select选中值为 百度，页面中控件值变成了 新浪 对应的值。
求解。。。

export default {
    name: 'containerOrder',
    data() {
      return {
            createForm: {
              idx:null,
              id:null,
              orderNo: null,
              logisticsUser: {
                companyTypeName: null,
                lockedQuota: null,
                quota: null,
                availableQuota: null,
              }
            },
          }
        }
      }

<el-row>
  <el-col :span="8">
    <el-form-item :label="this.$t('containerOrder.company')" prop="logisticsUserId">
      <el-select v-model="createForm.logisticsUserId" @change="changeLogisticsUser" filterable :placeholder='$t("pub.inputKey")'>
        <el-option v-for="item in companyData" :key="item.id" :label="item.val" :value="item.id"></el-option>
      </el-select>
    </el-form-item>
  </el-col>
  <el-col :span="8">
    <el-form-item :label="this.$t('logisticsUser.quota')" prop="logisticsUser.quota">
      <span>{{createForm.logisticsUser.quota}}</span>
    </el-form-item>
  </el-col>
<el-row>

changeLogisticsUser(val){
  logisticsUserApi.queryOne(val).then(res=>{
    let data=res.data.data
    this.createForm.companyName=data.companyName
    this.createForm.logisticsUserId=data.uid
    this.createForm.logisticsUser.companyTypeName=data.companyTypeName
    this.createForm.logisticsUser.quota=data.quota
    this.createForm.logisticsUser.availableQuota=data.availableQuota
    this.createForm.logisticsUser.lockedQuota=data.lockedQuota
  })
},