v-bind not unwrapping reactive properties from composable

export function useFieldControl(args: UseFieldControlArgs): UseFieldControlReturn {
  const fieldId = args.id || useId();
  const labelId = `${fieldId}-label`;
  const descriptionId = computed(() => (args.description ? `${fieldId}-description` : undefined));
  const errorId = computed(() => (args.error ? `${fieldId}-error` : undefined));

  const labelProps = computed(() => ({ htmlFor: fieldId, id: labelId }));
  const descriptionProps = computed(() => ({ id: descriptionId.value }));
  const errorProps = computed(() => ({ id: errorId.value }));

  const fieldProps = computed(() => {
    const describedby = [descriptionId.value, errorId.value].filter(
      (id) => typeof id !== "undefined",
    );

    return {
      "aria-describedby": describedby.length ? describedby.join(" ") : undefined,
      "aria-invalid": Boolean(errorId.value) || undefined,
      "aria-labelledby": labelId,
      id: fieldId,
    };
  });

  return { labelProps, descriptionProps, errorProps, fieldProps };
}

// TextField.vue
const args = useFieldControl(props);

<template>
  <div class="text-field">
    <VFieldLabel v-bind="args.labelProps">{{ label }}</VFieldLabel>
    ...rest of component
  </div>
</template>