A mixin merges properties into a component with no indication of where anything came from, and two mixins defining the same name silently collide.
export function useOrder(orderId) {
const order = ref(null);
const error = ref(null);
watchEffect(async () => {
try {
order.value = await fetchOrder(unref(orderId));
} catch (e) {
error.value = e;
}
});
return { order, error };
}
// setup() { const { order } = useOrder(props.orderId); }
The call site names what it takes, which is the property mixins never had — a component using three composables has three visible sources and no possibility of a collision. unref in the body is what lets the argument be either a plain value or a ref, which is the convention that makes composables composable. This is the same idea as a React hook with no rules about call order, because the reactivity is not positional.