[Vuejs]-Issue with multiple custom events firing, second event not working in Vue

i have pasted the code on my machine and both are working fine

parent

  <template>
  <child-component @upload="handleUpload" @uploading="mediaUploading" />
</template>

<script>
import childComponent from "./page4child.vue";
export default {
  components: {
    childComponent,
  },
  data() {
    return {
      mediaLoading: true,
    };
  },
  methods: {
    handleUpload(response) {
      //works
      this.mediaLoading = false;
      console.log(this.mediaLoading);
    },

    mediaUploading() {
      //works
      this.mediaLoading = true;
      console.log(this.mediaLoading);
    },
  },
};
</script>

Child

<template>
  <div>
    <button @click="trigger('item')">run</button>
  </div>
</template>

<script>
export default {
  methods: {
    async trigger(uploadedItem) {
      this.$emit("uploading");
      await new Promise((res) => {
        console.log("duck");
        res();
      });
      this.$emit("upload", uploadedItem);
    },
  },
};
</script>