Hi I am trying to make city - district field and this 2 field is connected with each other as you can guess. This place working like an edit page. I have city and district data comes from the api. I can show the city data nicely but when user select another option on that select-field i must clear the district data because vue-select doesnt clear it even v-model doesnt in options.

The problem is this after the page loads first "setAddressCity" method works and clears the district field so i cant show any data in district field. What can i do please help.

I am using vue-select my code like this.

<v-select
  placeholder="City"
  :options="Cities"
  v-model="addressCity"
  class="wide"
  @input="setAddressCity"
  name="address-city"
  label="name"
  value="id"
  >
    <span slot="no-options">Sorry, the country could not be found</span>
  </v-select>


<v-select
  v-model="addressDistrict"
  :options="addressDistricts"
  class="wide"
  label="name"
  name="address-county"
  placeholder="District"
  value="id"
  @input="setAddressDistrict"
          >
    <span slot="no-options">Sorry, the provience could not be found</span>
   </v-select>

Cities and districts comes from api.

setAddressCity(city) {
  if (!city) {
    this.form.address.city_id = null;
    this.form.address.city_readable = null;
    return;
  }

  this.form.address.city_id = city.id;
  this.form.address.city_readable = city.name;
  this.form.address.district_id = null;
  this.form.address.district_readable = null;
  this.getDistricts(city.id, districts => {
    this.addressDistricts = districts;
  });
},
setAddressDistrict(district) {
  if (!district) {
    this.form.address.district_id = null;
    this.form.address.district_readable = null;

    return;
  }

  this.form.address.district_id = district.id;
  this.form.address.district_readable = district.name;
},

this is computed data fields

 addressCity: {
  get: function() {
    if (this.form.address.city_id) {
      return {
        id: this.form.address.city_id,
        name: this.form.address.city_readable
      };
    }

    return null;
  },
  set: function() {}
},
addressDistrict: {
  get: function() {
    if (this.form.address.district_id) {
      return {
        id: this.form.address.district_id,
        name: this.form.address.district_readable
      };
    }

    return null;
  },
  set: function() {}
},

And this is getDisctrict code

getDistricts(cityID, callback) {
  $axios.get('district?city_id=' + cityID).then(s => {
    callback(s.data.data);
  });
}