Setup function basics in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this Vue 3 setup function render?

Consider this Vue 3 component using the setup function. What will be displayed on the page?

Vue

import { ref } from 'vue';

export default {
  setup() {
    const message = ref('Hello Vue 3!');
    return { message };
  },
  template: `<p>{{ message }}</p>`
};

A <p>Hello Vue 3!</p>

B <p>[object Object]</p>

C <p></p>

D <p>message</p>

💡 Hint

Remember that ref creates a reactive object and you can use it directly in the template.

The ref 'message' holds the string 'Hello Vue 3!'. Returning it from setup exposes it to the template, which renders its value.

📝 Syntax

intermediate

Which setup function code is syntactically correct?

Identify the option that correctly defines a setup function returning a reactive count variable.

A

setup() {
  const count = ref(0);
  return count;
}

B

setup() {
  const count = ref(0);
  return { count: count.value };
}

C

setup() {
  const count = ref(0);
  return count.value;
}

D

setup() {
  const count = ref(0);
  return { count };
}

💡 Hint

The setup function must return an object with reactive properties for the template to access.

Option D returns an object with the ref 'count', which Vue unwraps in the template. Other options return raw values or incorrect types.

❓ state_output

advanced

What is the value of 'count' after clicking the button twice?

Given this Vue 3 component, what will be the displayed count after two button clicks?

Vue

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    function increment() {
      count.value++;
    }
    return { count, increment };
  },
  template: `<div><button @click="increment">Add</button><p>{{ count }}</p></div>`
};

A 1

B 2

C 0

D NaN

💡 Hint

Each click increases count by 1 starting from 0.

The increment function adds 1 to count.value on each click. After two clicks, count is 2.

🔧 Debug

advanced

Why does this setup function cause a runtime error?

Examine the setup function below. Why will this code cause an error when the component renders?

Vue

import { ref } from 'vue';

export default {
  setup() {
    const name = ref('Alice');
    return name;
  },
  template: `<p>{{ name }}</p>`
};

A The setup function returns a ref directly, but the template expects an object with properties.

B The ref 'name' is not initialized properly with a string value.

C The template syntax is invalid and cannot access 'name'.

D The setup function is missing a return statement.

💡 Hint

Vue expects setup to return an object with keys for template bindings.

Returning the ref directly means the template cannot find 'name' as a property, causing an error.

🧠 Conceptual

expert

Which statement about the Vue 3 setup function is true?

Select the correct statement about the setup function in Vue 3 components.

A The setup function is optional and cannot use Vue's reactivity system.

B The setup function runs after the component is mounted and cannot access props.

C The setup function runs before the component is created and can only return reactive references or objects.

D The setup function replaces the template and must return a render function.

💡 Hint

Think about when setup runs and what it returns for the component.

Setup runs early, before creation, and returns reactive data or methods for the template.