In my Nuxt3 application, I have a button that triggers this event when clicked @click.prevent=”$emit(‘method’, form)”. I want to enhance this button’s behaviour by:

Setting isLoading to true before the event – this visually indicates that an operation is in progress.
Setting isLoading back to false after the event is complete – this signifies the operation’s completion.

I’m using NuxtUI’s UButton :loading component to achieve this look

I previously attempted using simple async function and promises to achieve this:

<script setup>
const isLoading = ref(false);
const emit = defineEmits(['method']);

const handleClick = async () => {
  isLoading.value = true;
  try {
    await new Promise(resolve => {
      emit('method', form);
    });
  } finally {
    isLoading.value = false;
  }
};
</script>

Or

<script setup>
const isLoading = ref(false);
const emit = defineEmits(['method']);
const handleClick = async () => {
    isLoading.value = true;
    try {
        emit('method', form);
    } finally {
        isLoading.value = false;
    }
};
</script>

However, this approach had issues with the finally block not executing which makes my button disabled forever