如何在Vue中获取<option>循环内部的对象关系？

data() {
  return {
    cities: [
      { id: 1, name: '北京', country: '中国' },
      { id: 2, name: '纽约', country: '美国' },
      { id: 3, name: '伦敦', country: '英国' },
    ],
    selectedCityId: null
  };
}

<select v-model="selectedCityId">
  <option v-for="city in cities" :value="city.id">{{ city.name }}</option>
</select>

// 访问选中的城市id
console.log(this.selectedCityId);

// 根据选中的城市id获取相关的对象关系
const selectedCity = this.cities.find(city => city.id === this.selectedCityId);
console.log(selectedCity);