Testing async behavior in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Vue 3 component display after mounting?

Consider this Vue 3 component using the Composition API. It fetches data asynchronously on mount.

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const message = ref('Loading...');

    onMounted(async () => {
      await new Promise(resolve => setTimeout(resolve, 100));
      message.value = 'Data loaded';
    });

    return { message };
  }
}

What text will be shown inside the component immediately after it mounts?

A Error: message is not defined

B Data loaded

C undefined

D Loading...

💡 Hint

Think about when the async code finishes compared to the initial render.

The component initially sets message to 'Loading...'. The async code runs after mount and updates message after 100ms. So immediately after mount, the displayed text is still 'Loading...'.

❓ state_output

intermediate

What is the value of count after this Vue 3 async update?

Given this Vue 3 component snippet:

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const count = ref(0);

    onMounted(() => {
      setTimeout(() => {
        count.value += 1;
      }, 50);
      count.value += 1;
    });

    return { count };
  }
}

What is the value of count.value after 100ms?

A 2

B 1

C 0

D NaN

💡 Hint

Count how many times count.value is incremented and when.

Initially, count.value is 0. On mount, it increments by 1 immediately, then increments by 1 again after 50ms. After 100ms, the value is 2.

📝 Syntax

advanced

Which option correctly handles async data fetching in Vue 3 setup?

Which of these Vue 3 setup functions correctly fetches data asynchronously and updates a reactive variable?

A

setup() {
  const data = ref(null);
  fetchData().then(response => {
    data.value = response;
  });
  return { data };
}

B

setup() {
  const data = ref(null);
  onMounted(async () => {
    data.value = await fetchData();
  });
  return { data };
}

C

setup: async () => {
  const data = ref(null);
  data.value = await fetchData();
  return { data };
}

D

setup() {
  const data = null;
  data = await fetchData();
  return { data };
}

💡 Hint

Remember that setup cannot be async and reactive variables need to be refs.

Option B uses onMounted with an async function to fetch data and update a ref. Option B is invalid because setup cannot be async. Option B tries to assign to a const and uses await outside async. Option B works but does not use onMounted, so fetch may start too early.

🔧 Debug

advanced

Why does this Vue 3 async update not trigger re-render?

Look at this Vue 3 setup code:

import { reactive, onMounted } from 'vue';

export default {
  setup() {
    const state = reactive({ count: 0 });

    onMounted(() => {
      setTimeout(() => {
        state.count = state.count + 1;
      }, 100);
    });

    return { state };
  }
}

After 100ms, the UI does not update to show the new count. What is the most likely reason?

A The UI is not bound to state.count in the template, so no update happens.

B The component did not return the reactive object properly from setup.

C setTimeout does not work inside onMounted lifecycle hook.

D The reactive object was mutated incorrectly; should use ref instead of reactive.

💡 Hint

Check if the template uses the reactive property to display the count.

The reactive state updates correctly, but if the template does not use state.count, Vue has no reason to re-render. The problem is likely in the template, not the code shown.

🧠 Conceptual

expert

What error occurs if you make Vue 3 setup() async and why?

What happens if you declare the setup function as async in Vue 3, like this?

export default {
  async setup() {
    const data = await fetchData();
    return { data };
  }
}

Choose the correct outcome and explanation.

A Vue ignores the async keyword and treats setup as synchronous, causing data to be undefined.

B The component works fine; Vue waits for the Promise to resolve before rendering.

C Vue throws a runtime error because setup must return a plain object, not a Promise.

D Vue logs a warning but still renders the component with empty data.

💡 Hint

Think about what Vue expects from the setup function return value.

Vue expects setup to return a plain object synchronously. Declaring it async makes it return a Promise, which Vue cannot handle, causing a runtime error.