Vue

HTML

<div id="vue-instance">
  <select class="form-control" @change="changeCountry($event)">
    <option value="" selected disabled>Choose</option>
    <option v-for="country in countries" :value="country.code" :key="country.code">{{ country.name }}</option>
  </select>
  <br><br>
  <p><span>Selected country name: {{selectedCountry }}</span></p>
  <p><span>User country: {{ user.address.country }}</span></p>
</div>

CSS

body {
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

var vm = new Vue({
  el: '#vue-instance',
  data: {
    countries: [
      { code: 'GB', name: 'Great Britain' },
      { code: 'US', name: 'United States' },
      { code: 'KZ', name: 'Kazakhstan' }
    ],
    selectedCountry: null,
    user: {
    	address: {
      	country: null
      }
    }
  },
  methods: {
    changeCountry (event) {
      this.user.address.country = event.target.value
      this.selectedCountry = event.target.options[event.target.options.selectedIndex].text
    }
  }
});