vue中model已经绑定，但页面没有显示内容

举一个常见例子比如联动的下拉框（先选择城市，然后获取当前城市区域的数据，可是会遇到的问题是当点击区域的时候，页面不显示，但model绑定的值已经得到）

城市(下拉框)---区域(下拉框)

  <div>
    <el-select v-model="form.city" clearable placeholder="请选择城市" @change="getArea()" @clear="clearSelect">
      <el-option v-for="item in cityData" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
    </el-select>
    <el-select v-model="form.area" clearable placeholder="请选择区域">
      <el-option v-for="item in areaData" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
    </el-select>
  </div>

原因分析：

大家都明白vue是数据驱动，当数据发生改变的时候，视图也会发生改变。但是VUE有时候受到一些限制，会无法检测到数据的修改，完成不了数据响应所以不能自动刷新。

关于数据驱动，数据响应了解地址

解决方案一：（不推荐：当跟踪响应数据之后还是没办法，最后迫不得已的时候使用--一般只有0.01%的可能性会用到）

既然是无法自动刷新，那么我们手动强制刷新一次

   this.$forceUpdate(); // 进行视图层重新渲染

解决方案二：(推荐)

使用Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性

官网直通车：检测数据变化以及跟踪