toRefs, and the composable that returns an object

A composable holding its state in a reactive object cannot return it directly, because every caller destructures the result and loses reactivity doing so.

export function usePagination() {
  const state = reactive({ page: 1, perPage: 25 })

  function next() { state.page++ }

  return { ...toRefs(state), next }
}

// so the caller can destructure and keep reactivity
const { page, perPage, next } = usePagination()

// toRef, for one property of a props object:
const id = toRef(props, 'id')

toRefs creates a ref per property, each of which writes back through to the original object, so the two stay in step in both directions. It only walks the top level — a nested object stays nested and destructuring one level down loses reactivity again. toRef is the single-property version and is the correct way to pass one prop into a composable, since props are reactive and a plain read captures the value at that moment.