Dynamic updates don't populate region when country option is also included

[jwoertink]

I have a setup sort of like this:

<script>
export default {
  props: {
    location: {
      type: Object, required: true
    }
  }
}
</script>

<template>
  <country-select v-model="location.country" :country="location.country" topCountry="US" />
  <region-select v-model="location.region" :country="location.country" :region="location.region" />
</template>

Then I have a button on the page that will load a different object passing in a different location. When this happens, the country is populated correctly, but the region is always blank, unless I remove the country option from region-select. Though, that leads to other issues if the region isn't a U.S. state....

My guess is maybe it's trying to populate both country and region at the same time, but there's some sort of race condition where region has to wait until after country has loaded..

[davidtmnolan]

Same issue. When using google address autocomplete to fill in form fields, the region is blank, even if country is set before region.

As a workaround, I added a 2 second delay after setting the country before setting the region.