Function: useComputedObjectFromProps()

function useComputedObjectFromProps<T, Props>(
  props: Props,
  pick: Extract<keyof Props, keyof T>[],
  overrides: Partial<T>,
): ComputedRef<T>;

Creates a computed object by picking specific props and merging them with overrides. This composable is designed for cases where you need to transform a subset of component props into a specific target type, combining selected reactive prop values with static overrides.

Unlike usePropsProxy which uses omit-based filtering (assuming most props are needed), this function uses pick-based filtering (assuming most props are NOT needed), making it ideal for creating focused, type-safe configuration objects from component props.

Type Parameters

Type Parameter	Description
T extends Record<string, any>	The target object type to construct. Explicitly specified by caller to enforce output shape.
Props extends Record<string, any>	The component props type (typically inferred from the props argument)

Parameters

Parameter	Type	Description
props	Props	The reactive props object from component setup
pick	Extract<keyof Props, keyof T>[]	Array of prop keys to extract. Must be keys that exist in both Props and T.
overrides	Partial<T>	Optional object with values to override or extend the picked props. Must be a partial of T.

Returns

ComputedRef<T>

A computed ref containing the merged object, typed as T

Remarks

• The pick parameter is required (no default), enforcing explicit declaration of what to include
• Only keys that exist in both Props and T can be picked (enforced by TypeScript)
• Overrides can only contain properties that exist in T with correct types
• The return value is asserted as T, so callers must ensure picked props + overrides form a valid T
• Props are unwrapped from refs before being merged
• The result is reactive - changes to picked props will trigger recomputation

Example

// Define target type for a specific use case
interface VFieldConfig {
  disabled: boolean;
  error: boolean;
  focused: boolean;
  label?: string;
}

// In component setup
const vFieldConfig = useComputedObjectFromProps<VFieldConfig>(
  props,
  ["disabled", "focused"], // Pick only what's needed from props
  { error: false, label: "Custom Label" }, // Add/override values
);

// vFieldConfig.value is typed as VFieldConfig and reactive
h(VField, vFieldConfig.value);