Обновление props из дочернего компонента. Vue.js

Есть цикл, который обходит все элементы из массива в vuex. Выводит компонент с props: <card :city="city">.
В данном компоненте я вызываю метод update(), который делает запрос к API и в ответ я получаю данные, как эти данные использовать внутри компонента <card>, если начальное значение (props) уже передано ? Пробую через emit, но не работает, хотя ивент отрабатывает как надо

Page:

</template>
  <transition-group name="fade-translate" tag="div" class="grid">
    <Card :city="city" v-for="city in cities" :key="city.id" @update="update(city, $event)"/>
  </transition-group>
</template>

<script>
  methods: {
    update (city, event) {
      city = event
    },
  },
  computed: {
    ...mapGetters(['cities', 'error'])
  },
</script>

Component:

<template>
  ....
  <div class="control">
    <button
      type="button"
      class="button is-text is-small has-text-link"
      @click="update(city)"
    >Update</button>
  </div>
  ....
</template>

<script>
export default {
  props: ['city'],
  methods: {
    async update (city) {
      const { data } = await $api.get('/weather', {
        params: {
          id: city.id,
          units: 'metric',
          appid: API_KEY
        }
      })
      this.$emit('update', data)
    }
  }
}
</script>