Composables are how a Vue codebase shares logic, so "how do you share logic between components" and "what makes a good composable" are standard senior questions. The follow-ups are where the depth shows: what breaks when a composable is called after an await, why module-level state is a bug in SSR, and how you test one.

Know

• A composable is a function that uses the Composition API to hold stateful logic. It is named useX, called synchronously in setup (or from another composable), and returns a plain object of refs and functions so callers can destructure it. Pure helpers without reactivity are utils, not composables.
• Inputs accept refs, getters or values. Type them as MaybeRefOrGetter<T> and normalise with toValue(). That lets the caller pass useTitle(title), useTitle(() => props.title) or useTitle('Home') and lets the composable react to changes in the first two.
• Options object for configuration, with defaults destructured inside. Positional booleans are unreadable at the call site.
• Lifecycle rules. onMounted, inject, getCurrentInstance need the current component instance, which exists only during synchronous setup. Inside <script setup>, await is compiled to restore the instance afterwards; inside a plain async function it is not. So: call composables at the top, before any await, and do async work inside them, not around them.
• Cleanup belongs to the scope. Register cleanup with onScopeDispose (works in components and in effectScope()), not only onUnmounted. VueUse's useEventListener, useIntervalFn and useResizeObserver clean up for you, which is why they are safer than raw addEventListener.
• SSR safety. No state at module level (it is shared by every request on the server); no window/document at call time (guard with import.meta.client, or do it in onMounted); no setInterval on the server (it never unmounts). In Nuxt, cross-component shared state goes in useState, which is per request and serialised into the payload.
• Return refs, not a reactive object. return { data, error, status, refresh } destructures safely; return reactive({...}) loses reactivity when destructured. Wrap what callers must not write in readonly().
• Composable versus store versus util. A composable creates new state per call; a Pinia store is one instance per app (per request on the server); a util has no state. Shared state via a composable needs createSharedComposable or createGlobalState from VueUse, and in Nuxt those must be backed by useState to be SSR-safe.
• Nuxt auto-imports the top level of app/composables/ (and app/utils/). Nested folders need an index re-export or imports.dirs. shared/utils is auto-imported in both app and server code and must not import Vue or Nitro APIs.

How it works

A composable with every convention applied: flexible input, options, status tracking, cancellation, scoped cleanup:

export interface UseAsyncTaskOptions {
  immediate?: boolean
}

export function useAsyncTask<T, Args extends unknown[]>(
  task: (signal: AbortSignal, ...args: Args) => Promise<T>,
  { immediate = false }: UseAsyncTaskOptions = {},
) {
  const data = shallowRef<T>()
  const error = shallowRef<unknown>()
  const status = ref<'idle' | 'pending' | 'success' | 'error'>('idle')
  let controller: AbortController | undefined

  async function run(...args: Args) {
    controller?.abort()
    controller = new AbortController()
    status.value = 'pending'
    try {
      data.value = await task(controller.signal, ...args)
      status.value = 'success'
    }
    catch (e) {
      if (controller.signal.aborted) return // superseded, not an error
      error.value = e
      status.value = 'error'
    }
  }

  // Works inside a component and inside a bare effectScope(), unlike onUnmounted.
  onScopeDispose(() => controller?.abort())

  if (immediate) run(...([] as unknown as Args))

  return { data: readonly(data), error: readonly(error), status: readonly(status), run }
}

A media query composable that is SSR-safe and accepts a ref, a getter or a string:

export function useMedia(query: MaybeRefOrGetter<string>, serverFallback = false) {
  const matches = ref(serverFallback)
  if (import.meta.server) return readonly(matches)

  let mql: MediaQueryList | undefined
  const update = () => { matches.value = mql?.matches ?? false }

  watchEffect((onCleanup) => {
    mql = window.matchMedia(toValue(query))
    update()
    mql.addEventListener('change', update)
    onCleanup(() => mql?.removeEventListener('change', update))
  })

  return readonly(matches)
}

Testing a composable without a component:

import { effectScope } from 'vue'
import { describe, expect, it } from 'vitest'
import { useAsyncTask } from '~/composables/useAsyncTask'

describe('useAsyncTask', () => {
  it('ignores a superseded call', async () => {
    const scope = effectScope()
    const task = scope.run(() => useAsyncTask(async (signal, ms: number) => {
      await new Promise((r, reject) => {
        const t = setTimeout(r, ms)
        signal.addEventListener('abort', () => { clearTimeout(t); reject(new Error('aborted')) })
      })
      return ms
    }))!

    const slow = task.run(50)
    const fast = task.run(10)
    await Promise.all([slow, fast])
    expect(task.data.value).toBe(10)
    expect(task.status.value).toBe('success')
    scope.stop()
  })
})

Exercise

Be able to say