Vue.js Developer Certification — Questions and Answers

Question 1: Which Vue API style organizes logic by feature using a single setup() function?

Functional API
Class API
Options API
Composition API (Correct answer)

Correct answer: Composition API

The Composition API groups related logic inside setup(), unlike the Options API which splits by data/methods/computed.

Question 2: What is the recommended scope for element selectors in scoped component styles?

Always use element selectors
Use inline styles only
Use only ID selectors
Avoid element selectors; prefer class selectors for performance (Correct answer)

Correct answer: Avoid element selectors; prefer class selectors for performance

Class selectors are faster than element selectors when combined with scoped attribute selectors.

Question 3: What does shallowRef() do to improve performance compared to ref()?

It creates a ref that is only accessible from shallow components
It limits the ref to a single reactive update per tick
It prevents the ref from being used in templates
It makes the ref reactive only at the top level, skipping deep reactivity for nested objects (Correct answer)

Correct answer: It makes the ref reactive only at the top level, skipping deep reactivity for nested objects

shallowRef() wraps a value in a ref but does not convert nested objects to reactive proxies, reducing overhead for large objects that are replaced entirely.

Question 4: What does a computed property provide over a method?

Cached results that update only when dependencies change (Correct answer)
Scoped styles
Automatic event emitting
A way to register components

Correct answer: Cached results that update only when dependencies change

Computed properties cache and recompute only when their reactive dependencies change.

Question 5: Which modifier is really helpful for enhancing the functionality of mobile devices?

.directive
.capture
.passive (Correct answer)
.constant

Correct answer: .passive

The `.passive` event modifier is crucial for enhancing scrolling performance on mobile devices. It informs the browser that the event listener will not call `preventDefault()`, allowing the browser to perform its default scrolling behavior immediately. This prevents potential jank and ensures a smoother user experience, especially for touch and scroll events.

Question 6: Which lifecycle hook runs after a component is added to the DOM?

beforeMount
destroyed
created
mounted (Correct answer)

Correct answer: mounted

mounted fires once the component has been inserted into the DOM.

Question 7: What does the errorCaptured lifecycle hook do in Vue?

Catches JavaScript syntax errors at compile time
Restarts the component instance after a crash
Logs network errors from fetch calls
Intercepts errors thrown by descendant components and prevents them from propagating further (Correct answer)

Correct answer: Intercepts errors thrown by descendant components and prevents them from propagating further

errorCaptured fires when an error propagates from a child component; returning false stops the error from bubbling further up the component tree.

Question 8: Which prop modifier in Vue 3 makes `v-model` work on a custom component with a non-default prop name?

v-bind:propName.sync
v-model:propName (Correct answer)
v-bind:modelValue
v-model.propName

Correct answer: v-model:propName

Vue 3's `v-model:propName` syntax allows binding `v-model` to a specific prop name on a custom component, enabling multiple v-model bindings.

Question 9: How do you watch a reactive value for changes in Vue 3 Composition API?

watch(count, (newVal, oldVal) => { ... }) (Correct answer)
this.$watch('count', callback)
computed(() => count.value)
onMounted(() => { trackCount(count) })

Correct answer: watch(count, (newVal, oldVal) => { ... })

The `watch` function from Vue 3 Composition API observes a reactive source (ref, computed, getter function, or reactive object) and calls the callback when it changes.

Question 10: Which syntax correctly uses a dynamic slot name in a parent component?

v-slot.dynamicSlotName
v-slot(dynamicSlotName)
v-slot:{dynamicSlotName}
v-slot:[dynamicSlotName] (Correct answer)

Correct answer: v-slot:[dynamicSlotName]

Dynamic slot names use the same square bracket notation as dynamic directive arguments, e.g., `v-slot:[dynamicSlotName]` where the variable resolves at runtime.

Question 11: In Vue 3's Composition API, which function creates a read-only reactive reference derived from other reactive state?

reactive()
readonly()
ref()
computed() (Correct answer)

Correct answer: computed()

computed() accepts a getter function and returns a cached, read-only reactive ref that only re-evaluates when its dependencies change.

Question 12: What is the key difference between watch() and watchEffect() in Vue 3?

watch() runs immediately on mount; watchEffect() does not
watch() is synchronous; watchEffect() is async
watch() cannot access old values; watchEffect() can
watch() requires explicit source declaration; watchEffect() auto-tracks dependencies (Correct answer)

Correct answer: watch() requires explicit source declaration; watchEffect() auto-tracks dependencies

watch() observes specific declared sources and provides old/new values, while watchEffect() auto-collects dependencies at runtime.

Question 13: In Vue 3, which of the following best describes one-way data flow for props?

Props are automatically two-way bound
Props flow from parent to child; child should not mutate them (Correct answer)
Parent and child can both mutate shared props
Props flow from child to parent using v-model

Correct answer: Props flow from parent to child; child should not mutate them

Vue enforces one-way data flow: props go from parent to child. The child must emit an event instead of mutating the prop directly.

Question 14: In the Composition API (`<script setup>`), how do you access a component's slots?

Via useSlots() or by destructuring slots from the setup() context argument (Correct answer)
Via onMounted(() => this.$slots)
Via inject('slots') from a parent provider
Via ref(slots) to create a reactive slot reference

Correct answer: Via useSlots() or by destructuring slots from the setup() context argument

In `<script setup>`, `useSlots()` returns the slots object, while in a manual `setup()` function, slots is available as a context argument property.

Question 15: What does ref() return in Vue 3?

A shallow reactive object
A plain JavaScript object
A computed property
A reactive reference object with a .value property (Correct answer)

Correct answer: A reactive reference object with a .value property

ref() returns a reactive reference object where the actual value is accessed via the .value property.

Question 16: What does `toRefs` do in Vue 3?

Converts computed values to refs
Converts a reactive object's properties into individual refs, preserving reactivity when destructured (Correct answer)
Converts refs into a reactive object
Removes reactivity from a reactive object

Correct answer: Converts a reactive object's properties into individual refs, preserving reactivity when destructured

`toRefs` converts each property of a reactive object into a separate ref, so destructuring the result maintains reactivity.

Question 17: How do you define a dynamic route segment in Vue Router?

Using a colon prefix: :id (Correct answer)
Using curly braces: {id}
Using brackets: [id]
Using angle brackets: <id>

Correct answer: Using a colon prefix: :id

Dynamic segments are defined with a colon prefix (e.g., /user/:id), and the value is accessible via route.params.id.

Question 18: What is the correct way to pass a dynamic prop value in a Vue template?

v-prop:title="pageTitle"
bind-title="pageTitle"
:title="pageTitle" (Correct answer)
title="pageTitle"

Correct answer: :title="pageTitle"

The `:title` shorthand for `v-bind:title` binds the prop to a JavaScript expression, making it dynamic.

Question 19: In Pinia, how do you reset a store's state back to its initial values?

store.reset()
Pinia.resetAll()
store.$reset() (Correct answer)
store.$state = {}

Correct answer: store.$reset()

`$reset()` is a built-in Pinia method on Options Stores that restores state to the values returned by the `state` factory function.

Question 20: What is the difference between mount() and shallowMount() in @vue/test-utils?

mount() fully renders child components; shallowMount() stubs child components (Correct answer)
shallowMount() runs faster because it uses SSR
mount() is for Vue 3; shallowMount() is for Vue 2
mount() requires a real browser; shallowMount() runs in Node

Correct answer: mount() fully renders child components; shallowMount() stubs child components

shallowMount() replaces all child components with stubs so tests focus on the component under test without being affected by child component behavior.

Question 21: What does the `v-model` directive do on a native `<input>` element?

Renders a model/schema-based form
Applies CSS styling to the input
Creates a two-way binding between the input's value and a data property (Correct answer)
Validates the input's value

Correct answer: Creates a two-way binding between the input's value and a data property

`v-model` on `<input>` is syntactic sugar for `:value="data"` + `@input="data = $event.target.value"`, keeping the data and input in sync.

Question 22: How can you use ES6 destructuring with scoped slot props?

<template v-slot:default [item, index]>{{ item }}</template>
<template v-slot:default="props" :destructure="props">{{ props.item }}</template>
<template v-slot:default destructure="item, index">{{ item }}</template>
<template v-slot:default="{ item, index }">{{ item }}</template> (Correct answer)

Correct answer: <template v-slot:default="{ item, index }">{{ item }}</template>

JavaScript destructuring syntax works directly inside the v-slot value, allowing you to extract only the specific slot props you need.

Question 23: What are composables in Vue 3?

Reusable functions that encapsulate stateful logic using Composition API (Correct answer)
Components without a template
Vue plugins that add global methods
Functions that replace Vuex stores

Correct answer: Reusable functions that encapsulate stateful logic using Composition API

Composables are functions (by convention prefixed with `use`) that use Composition API features like `ref`, `computed`, and lifecycle hooks to encapsulate and reuse logic.

Question 24: How do you access a Pinia store's state and actions inside a Vue 3 component?

const store = useMyStore(); store.count; store.increment() (Correct answer)
inject('myStore').count
const store = new MyStore(); store.state.count
this.$store.state.count

Correct answer: const store = useMyStore(); store.count; store.increment()

Pinia stores are used by calling the composable returned by `defineStore`. The result directly exposes state, getters, and actions as flat properties.

Question 25: In vue.js, what keyword is used to construct a constant?

Constant
Cnst
Const (Correct answer)
None of the above

Correct answer: Const

`const` is the standard JavaScript keyword used to declare a constant, whose value cannot be reassigned after its initial declaration. Since Vue.js applications are built using JavaScript, this keyword is fundamental for defining constant values within Vue components and instances.

Question 26: How do you subscribe to state changes in Pinia to run a side effect after every mutation?

store.$subscribe() (Correct answer)
store.onMutate()
store.watch()
store.$watch()

Correct answer: store.$subscribe()

$subscribe() registers a callback that fires after every state change in the store, providing the mutation and the new state.

Vue.js Developer Certification

The official Vue.js Developer Certification tests competency in building reactive web applications with Vue 3, covering core concepts, components, the Composition API, reactivity, and the broader Vue ecosystem. Developed in collaboration with Evan You and the Vue.js core team via Certificates.dev.

Questions

25 min

Time Limit

83%

To Pass

Checking for saved progress...

Exam Rules

You can skip questions and return to them later
Flag questions for review before submitting
No feedback shown until you submit the entire exam
Unanswered questions count as wrong — answer everything
10 pretest questions are mixed in and don't affect your score
Timer auto-submits when time runs out
Your progress is auto-saved every 30 seconds