Aktualizacja właściwości jest wykonywana tylko w następnym przebiegu aktualizacji

Mam składnik „aktualizacja nazwy użytkownika”, który przyjmuje nazwę jako właściwość. Ten komponent ma również przycisk zapisywania i po kliknięciu emituje zdarzenie aktualizacji.

Nazwa jest pusta podczas ładowania strony, ponieważ najpierw muszę pobrać użytkownika w komponencie nadrzędnym. Niestety komponent potomny nie zaktualizuje się po pobraniu użytkownika wraz z jego nazwą. A podczas aktualizacji nazwy w komponencie podrzędnym renderuje poprzednią nazwę.

Próbowałem odtworzyć zachowanie, jeśli chcesz mieć plac zabaw to jest piaskownica

https://codesandbox.io/s/objective-gagarin-e6kbz

Mój składnik podrzędny

<template>
  <div>
    <input v-model="currentName" placeholder="name">
    <button @click="resetCurrentName">Cancel</button>
    <button @click="update">Update</button>
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      currentName: ""
    };
  },
  mounted() {
    // update current input to prop
    this.resetCurrentName();
  },
  methods: {
    resetCurrentName() {
      this.currentName = this.name;
    },
    update() {
      this.$emit("update", this.currentName);
      this.resetCurrentName();
    }
  }
};
</script>

I mój komponent nadrzędny

<template>
  <div id="app">
    <UpdateName :name="name" @update="updateName"/>
  </div>
</template>

<script>
import UpdateName from "./components/UpdateName";

export default {
  components: {
    UpdateName
  },
  data() {
    return {
      user: null
    };
  },
  async mounted() {
    await console.log("fetching the user from the api");
    this.user = { name: "bar" };
  },
  computed: {
    name() {
      const user = this.user;

      if (!user) {
        return "";
      }

      return user.name;
    }
  },
  methods: {
    async updateName(newName) {
      await console.log("updating user name via api call");
      this.user.name = newName;
    }
  }
};
</script>

Więc w zasadzie musiałbym wymusić aktualizację właściwości po pobraniu użytkownika z API. Ale Vue powinien to zrobić domyślnie. Więc nie mogę dowiedzieć się, co jest nie tak lub czego tu brakuje. Jak mogę naprawić to zachowanie?

Z góry dziękuję