Estoy tratando de crear un menú desplegable para mi proyecto Vue3 para seleccionar un país de la lista. Antes de eso, he estado usando select>option para enumerar y seleccionar un país como este;

 <template> <select class="settings-item settings-text upper shadow-lg shadow-gray-300/50" v-model="selectedCountry" :disabled="!countries.length" > <option v-for="country in countries" :key="country.id" :value="country"> {{ country.name }} </option> </select> </template>

 computed: { selectedCountry: { get() { return this.userCountry }, set(country) { this.SET_USER_COUNTRY(country) this.SET_COUNTRY_ID(country.id) this.fetchCities() } } }

Pero ahora tengo un nuevo componente que obtiene y representa la lista, estoy enviando datos de países seleccionados del componente nieto a este componente principal, ahora quiero enviar los datos que provienen de componentes secundarios y actualizar mi propiedad calculada nuevamente. Creo que puedo escribir un método para hacer mutaciones y buscar ciudades, pero no estoy seguro.