How do you implement a data-fetching Composable in Vue 3?

WHAT THIS TESTS: This question checks whether you understand the difference between stateless utility functions and stateful logic reuse in Vue 3. Interviewers want to see that you know why composables exist, how to keep them reactive, and how they hook into component lifecycles. The core idea is encapsulating logic that manages changing state over time and side effects like API calls. They are also listening for awareness that composables are factory functions, not services, so each component instance gets isolated state when it invokes the function.

A GOOD ANSWER COVERS: A strong answer starts with the naming convention, prefixing the function with use. It then describes accepting parameters such as a URL, creating refs for data, loading, and error, and performing the fetch inside onMounted or a reactive watcher. The answer should mention returning the reactive refs so the consuming component can destructure them. It should also note that each component calling the composable gets its own independent state because the function is invoked per instance. You can add that the composable can accept reactive arguments or options objects, and that cleanup like abort controllers should happen in onUnmounted.

COMMON WRONG ANSWERS: Red flags include returning plain non-reactive variables instead of refs, which breaks reactivity in the template. Another mistake is creating a shared singleton object outside the function so every component mutates the same state. Candidates sometimes forget to handle loading or error states, or they place the fetch directly in the composable body without lifecycle awareness, causing requests to fire at import time rather than mount time. A subtle error is forgetting that destructuring reactive objects loses reactivity unless refs are returned.

LIKELY FOLLOW-UPS: The interviewer might ask how to handle automatic refetching when a URL changes, how to cancel in-flight requests on unmount, or how to make the composable accept reactive arguments. They could also ask about TypeScript generics for type-safe data returns, or how to test a composable independently of a component. Another common follow-up is comparing composables to mixins or utility hooks in other frameworks and explaining why the factory pattern avoids namespace collisions.

ONE CONCRETE EXAMPLE: You could write a useFetch function that takes a url string, defines const data equals ref null, const loading equals ref false, and const error equals ref null. Inside onMounted, set loading dot value to true, call fetch with the url, assign the parsed JSON to data dot value, catch any exception into error dot value, and finally set loading to false. The function returns an object containing data, loading, and error. A component imports useFetch, calls it with an endpoint, and binds the returned refs directly in the template. If the url were reactive, you would watch it and refetch whenever it changes, making sure to handle race conditions.