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.

Practice

1. What is the main purpose of the setup function in a Vue 3 component?

easy

A. To register global components

B. To define reactive data and functions before the component renders

C. To handle routing between pages

D. To style the component using CSS

Solution

1. Step 1: Understand the role of setup in Vue 3

   The setup function is where you declare reactive data and functions that the component will use.

2. Step 2: Compare with other options

   Styling, routing, and global registration are handled elsewhere, not in setup.

3. Final Answer:

   To define reactive data and functions before the component renders -> Option B

4. Quick Check:

   Setup function = reactive data + functions [OK]

Hint: Remember: setup is for data and logic, not styling or routing [OK]

Common Mistakes:

• Confusing setup with styling or routing
• Thinking setup runs after rendering
• Assuming setup registers global components

2. Which of the following is the correct way to declare a reactive variable inside the setup function using Vue 3 Composition API?

easy

A. const count = useState(0);

B. const count = reactive(0);

C. const count = reactive({ value: 0 });

D. const count = ref(0);

Solution

1. Step 1: Identify correct reactive declaration for simple values

   For simple reactive variables like numbers, ref is used, e.g., const count = ref(0);.

2. Step 2: Check other options

   reactive is for objects, not primitives; useState is not a Vue function.

3. Final Answer:

   const count = ref(0); -> Option D

4. Quick Check:

   Simple reactive variable = ref() [OK]

Hint: Use ref() for single values, reactive() for objects [OK]

Common Mistakes:

• Using reactive() for primitive values
• Trying to use non-existent useState()
• Wrapping primitive in reactive({ value: ... }) unnecessarily

3. Consider this Vue 3 component setup code:

import { ref } from 'vue';

export default {
  setup() {
    const message = ref('Hello');
    function update() {
      message.value = 'Hi';
    }
    return { message, update };
  }
}

What will be the value of message after calling update()?

medium

A. 'Hi'

B. undefined

C. 'Hello'

D. An error occurs

Solution

1. Step 1: Understand ref and updating its value

   message is a ref holding 'Hello'. Calling update() sets message.value to 'Hi'.

2. Step 2: Determine final value after update

   After update(), message.value is 'Hi', so message reactive variable reflects 'Hi'.

3. Final Answer:

   'Hi' -> Option A

4. Quick Check:

   Ref value updated correctly = 'Hi' [OK]

Hint: Remember to access .value to update ref variables [OK]

Common Mistakes:

• Forgetting to use .value to update ref
• Assuming message itself changes, not message.value
• Thinking update() does not affect message

4. Identify the error in this Vue 3 setup function:

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    function increment() {
      count = count + 1;
    }
    return { count, increment };
  }
}

medium

A. setup function should return a single object

B. Missing import of reactive

C. Cannot assign to ref variable directly; should use count.value

D. increment function is not declared correctly

Solution

1. Step 1: Check how ref variables are updated

   Ref variables hold their value inside .value. Direct assignment like count = count + 1 is invalid.

2. Step 2: Correct way to update ref

   Use count.value = count.value + 1 or count.value++ to update.

3. Final Answer:

   Cannot assign to ref variable directly; should use count.value -> Option C

4. Quick Check:

   Update ref with .value [OK]

Hint: Always update ref with .value, not direct assignment [OK]

Common Mistakes:

• Assigning directly to ref variable
• Forgetting to use .value when updating
• Confusing reactive and ref update syntax

5. You want to create a Vue 3 component using <script setup> that has a reactive object with properties name and age. Which code correctly defines this reactive object and updates age by 1 inside setup?

hard

A. import { reactive } from 'vue';

const person = reactive({ name: 'Alice', age: 30 });
person.age++;

B. import { ref } from 'vue';

const person = ref({ name: 'Alice', age: 30 });
person.age++;

C. import { reactive } from 'vue';

const person = reactive({ name: 'Alice', age: 30 });
person = { ...person, age: person.age + 1 };

D. import { ref } from 'vue';

const person = ref({ name: 'Alice', age: 30 });
person.value.age = person.age + 1;

Solution

1. Step 1: Choose correct reactive type for object

   Use reactive for objects to make all properties reactive.

2. Step 2: Update property correctly

   With reactive, update properties directly like person.age++. Using ref with objects requires accessing .value.

3. Final Answer:

   import { reactive } from 'vue'; const person = reactive({ name: 'Alice', age: 30 }); person.age++; -> Option A

4. Quick Check:

   Reactive object updated directly =

   import { reactive } from 'vue';
   
   const person = reactive({ name: 'Alice', age: 30 });
   person.age++;
   

   [OK]

Hint: Use reactive() for objects, update properties directly [OK]

Common Mistakes:

• Using ref for objects without .value access
• Reassigning reactive object instead of updating property
• Trying to increment property on ref object without .value