Element-Ui中el-select选择后无法选中

在我们开发项目过程中，多数情况下回用到element-ui中的select选择器，在开发过程中，会遇到这种情况，

我们渲染完数据之后，el-select默认显示第一次选择的项，当我们切换后选择器并不能实时更新。

<el-select v-model="form.tenantId" placeholder="请选择渠道客户">
     <el-option
        :label="item.shortName"
        :value="item.tenantId"
       v-for="(item, index) in customerListInfo"
       :key="index"
      ></el-option>
</el-select>

 //所属客户列表
    getCustomerListFn() {
      customerListApi().then((res) => {
        this.customerListInfo = res.data;
      });
    },

vue.js官网给出这样一个结论：

受javascript的限制，vue不能检测到对象属性的添加或删除。由于Vue会在初始化实例时对属性执行getter/setter转换过程，所以属性必须在data中存在才能让vue转换它，这样才是响应式的，

具体来说就是在首次初始化之后，vue不会在进行加载渲染了，需要我们手动去执行渲染方法去重新加载它。

解决方案：使用Vue.js官方提供的vm.$forceUpdate()方法，该方法作用是迫使Vue实例重新渲染。

             <el-form-item label="所属客户列表:" label-width="120px">
              <el-select v-model="form.tenantId" placeholder="请选择客户列表"         
                @change="$forceUpdate()">
                <el-option
                  :label="item.shortName"
                  :value="item.tenantId"
                  v-for="(item, index) in customerListInfo"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>