I'm trying to build a dropdown menu for my Vue3 project to select a country from list. Before that I've been using select>option to list and select country like this;

    <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()
      }
    }
}

But now I have a new component that gets and renders the list, I'm sending selected country data from grandchild component to this parent component now I want to send the data comes from child components and update my computed property again. I think I may write a mehtod to do mutation and fetch cities, but I'm not sure.