yoklainterview sim
ProgressHistory

Frontend Vue Composition Api Interview Questions

75 verified Frontend Vue Composition Api interview questions — solve with answers, learn from explanations, test yourself in a real simulation.

Try the real simulation →

Sample questions

Vue Composition ApiDifficulty 1
In Vue 3's Composition API, what two arguments does the setup() function receive?
  • adata and methods
  • bprops and context✓
  • cthis and router
  • dstate and dispatch
Explanation:setup(props, context) is the entry point of the Composition API. props is a reactive object of the resolved props, and context is a plain object exposing attrs, slots, emit, and expose (it is NOT reactive itself, unlike props).
Vue Composition ApiDifficulty 1
In a <script setup> block, how do top-level variables and functions become available in the component's template?
  • aAutomatically — no return needed✓
  • bBy calling defineExpose() for each one
  • cBy adding them to a return object, like in setup()
  • dOnly imports from vue are exposed
Explanation:<script setup> is compile-time syntax sugar: any top-level binding (variable, function, import) declared in the block is automatically available in the template — there is no return statement at all, unlike the regular setup() function form.
Vue Composition ApiDifficulty 2
What naming convention do Vue composables follow, and why?
  • aThey must end in Composable
  • bThere is no convention
  • cThey start with use (e.g. useMouse)✓
  • dThey are named after their file
Explanation:The useXxx naming convention (borrowed from React hooks) is a community/tooling convention, not a language rule enforced by Vue itself — but it signals to readers and linters that the function likely calls other composition APIs (like ref, lifecycle hooks) internally.
Vue Composition ApiDifficulty 2
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const box = ref(null);
    onMounted(() => {
      console.log(box.value.offsetWidth);
    });
    return { box };
  }
};

Assuming box is bound to a <div ref="box"> in the template, why does box.value.offsetWidth work here but would fail if read directly in the body of setup()?
  • aref() always returns null regardless of context
  • bThe DOM element isn't there yet during setup() itself✓
  • coffsetWidth only exists inside lifecycle hooks
  • dconsole.log cannot run inside setup()
Explanation:Template refs are only populated with the actual DOM element after the component's render output has been mounted. setup() runs before that mounting happens, so box.value is still null there — onMounted is specifically the hook that guarantees the DOM exists.
Vue Composition ApiDifficulty 1
Inside a component's setup() function, what does this refer to?
  • aThe component instance, like in methods
  • bundefined✓
  • cThe parent component instance
  • dThe global window object
Explanation:setup() runs before the component instance is fully created, and Vue explicitly does not bind this inside it — attempting to use this in setup() returns undefined. This is a deliberate design choice pushing all state/logic through the function's own scope (via ref/reactive) instead of an instance.
Vue Composition ApiDifficulty 2
// theme.js
import { inject } from 'vue';

export function useTheme() {
  const theme = inject('theme', 'light');
  return { theme };
}

If a component calls useTheme() but no ancestor component has called provide('theme', ...), what does theme end up being?
  • a'light'✓
  • bundefined, plus a runtime error
  • cAn empty reactive object
  • dIt waits for a provider to mount
Explanation:inject(key, defaultValue) accepts an optional default value that is used when no matching provide() call is found up the ancestor chain — no error is thrown, theme simply resolves to 'light' here.

By specialization

Angular 450JavaScript 450React 450TypeScript 450Vue 450

By seniority

Frontend JuniorFrontend MidFrontend Senior

Other fields

BackendFullstackDevOps / CloudAI EngineerDatabaseMobileSecurityQA / Test AutomationData EngineerGame DevelopmentML Engineer

Test yourself against the 2925-question Frontend bank.

Start interview