china-area-data/v3/data 省份可以正常显示，市、区无法显示，请协助

<form  action="#" >
                                        <select-district  inline-template>
                                            <div class="row">
                                                <div class="col-md-4">
                                                    <div class="single-input-item">
                                                        <label for="country" class="required">省</label>
                                                        <select class="form-control" v-model="provinceId">
                                                            <option value="">选择省</option>
                                                            <option v-for="(name, id) in provinces" :value="id">@{{ name }}</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="single-input-item">
                                                        <label for="country" class="required">市</label>
                                                        <select class="form-control" v-model="cityId">
                                                            <option value="">选择市</option>
                                                            <option v-for="(name, id) in cities" :value="id">@{{ name }}</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="single-input-item">
                                                        <label for="country" class="required">区\县</label>
                                                        <select class="form-control" v-model="districtId">
                                                            <option value="">选择区\县</option>
                                                            <option v-for="(name, id) in districts" :value="id">@{{ name }}
                                                            </option>
                                                        </select>
                                                    </div>
                                                </div>

                                            </div>
                                        </select-district>
                                        <div class="single-input-item">
                                            <label for="com-name">详细地址</label>
                                            <input type="text" name="#"  placeholder="详细地址...">
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="single-input-item">
                                                    <label for="f_name" class="required">收件人姓名</label>
                                                    <input type="text" name="#"   placeholder="收件人姓名..." required="">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="single-input-item">
                                                    <label for="l_name" class="required">收件人联系电话</label>
                                                    <input type="text" name="contact_phone"  value="13326148348" required="">
                                                </div>
                                            </div>
                                        </div>
                                        <button type="submit" class="check-btn sqr-btn mt-10">确认提交</button>

                                    </form>

// 从刚刚安装的库中加载数据
const addressData = require('china-area-data/v3/data');
// 引入 lodash，lodash 是一个实用工具库，提供了很多常用的方法
import _ from 'lodash';

// 注册一个名为 select-district 的 Vue 组件
Vue.component('select-district', {
// 定义组件的属性
props: {
// 用来初始化省市区的值，在编辑时会用到
initValue: {
type: Array, // 格式是数组
default: () => ([]), // 默认是个空数组
}
},
// 定义了这个组件内的数据
data() {
return {
provinces: addressData['86'], // 省列表
cities: {}, // 城市列表
districts: {}, // 地区列表
provinceId: '', // 当前选中的省
cityId: '', // 当前选中的市
districtId: '', // 当前选中的区
};
},
// 定义观察器，对应属性变更时会触发对应的观察器函数
watch: {
// 当选择的省发生改变时触发
provinceId(newVal) {
if (!newVal) {
this.cities = {};
this.cityId = '';
return;
}
// 将城市列表设为当前省下的城市
this.cities = addressData[newVal];
// 如果当前选中的城市不在当前省下，则将选中城市清空
if (!this.cities[this.cityId]) {
this.cityId = '';
}
},
// 当选择的市发生改变时触发
cityId(newVal) {
if (!newVal) {
this.districts = {};
this.districtId = '';
return;
}
// 将地区列表设为当前城市下的地区
this.districts = addressData[newVal];
// 如果当前选中的地区不在当前城市下，则将选中地区清空
if (!this.districts[this.districtId]) {
this.districtId = '';
}
},
// 当选择的区发生改变时触发
districtId() {
// 触发一个名为 change 的 Vue 事件，事件的值就是当前选中的省市区名称，格式为数组
this.$emit('change', [this.provinces[this.provinceId], this.cities[this.cityId], this.districts[this.districtId]]);
},
},
// 组件初始化时会调用这个方法
created() {
this.setFromValue(this.initValue);
},
methods: {
//
setFromValue(value) {
// 过滤掉空值
value = .filter(value);
// 如果数组长度为0，则将省清空（由于我们定义了观察器，会联动触发将城市和地区清空）
if (value.length === 0) {
this.provinceId = '';
return;
}
// 从当前省列表中找到与数组第一个元素同名的项的索引
const provinceId = .findKey(this.provinces, o => o === value[0]);
// 没找到，清空省的值
if (!provinceId) {
this.provinceId = '';
return;
}
// 找到了，将当前省设置成对应的ID
this.provinceId = provinceId;
// 由于观察器的作用，这个时候城市列表已经变成了对应省的城市列表
// 从当前城市列表找到与数组第二个元素同名的项的索引
const cityId = .findKey(addressData[provinceId], o => o === value[1]);
// 没找到，清空城市的值
if (!cityId) {
this.cityId = '';
return;
}
// 找到了，将当前城市设置成对应的ID
this.cityId = cityId;
// 由于观察器的作用，这个时候地区列表已经变成了对应城市的地区列表
// 从当前地区列表找到与数组第三个元素同名的项的索引
const districtId = .findKey(addressData[cityId], o => o === value[2]);
// 没找到，清空地区的值
if (!districtId) {
this.districtId = '';
return;
}
// 找到了，将当前地区设置成对应的ID
this.districtId = districtId;
}
}
});