What does this log?
const count = ref(1);console.log(count.value + 1, typeof count);
What this Vue test measures, in short
This test checks whether you understand how Vue 3 tracks and updates data: ref versus reactive and when reactivity is lost, how directives like v-if, v-show and v-model work, how props and attributes flow, when computed values and watchers run, and when the DOM actually updates.
Questions use the Composition API with script setup. The Options API and Nuxt aren't covered. The questions are our own and not standardised, so treat the result as a knowledge check, not a certification.
By What's Your IQ · Reviewed 4 Oct 2026- Format
- 15 questions on what renders or logs, 4 options each
- Topics
- Reactivity, templates and directives, components and props, computed and watchers, lifecycle
- Assumes
- Comfortable JavaScript and HTML
- Framework
- Created by Evan You; first released 2014
Which ones keep up?
Vue's reactivity works through proxies and refs. Pull a plain value out of either and you get a snapshot that no longer updates. Change the source and see which copies follow.
const state = reactive({ count: 0 });const { count } = state;template shows0Copied out once. A plain number that never changes again.const state = reactive({ count: 0 });const { count } = toRefs(state);template shows0Each property becomes a ref linked back to the proxy, so it stays in sync.const state = reactive({ count: 0 });// template: state.counttemplate shows0Reading through the proxy at render time lets Vue track it.const state = reactive({ count: 0 });const copy = { ...state };template shows0Spreading makes a new plain object. Reactivity doesn't come along.Works today, confuses everyone tomorrow
const items = ref([]);const total = ref(0);watch(items, list => { total.value = list.reduce((s, i) => s + i.price, 0);}, { deep: true });const items = ref([]);const total = computed(() => items.value.reduce((s, i) => s + i.price, 0));
If a value can be calculated from other state, make it computed. It's cached, always in sync, and needs no deep watcher.
- Honeypot. (2020). Vue.js: The documentary.
- You, E. (2020). Vue 3.0 "One Piece" release announcement. Vue Blog.
- Vue Team. Vue 2 end of life. v2.vuejs.org.