Using whole objects with selector prop instead of v-model for components

[MelvinFrohike]

Hi,
I would like the communities help to evaluate an idea I have where I am unsure how well it would work and if there are any problems I might have missed.

In my software I have lots of forms for BusinessObject classes where I use custom components to edit the numerous properties.
These components need to be dynamically and independently made visible/invisible, enabled/disabled, and decorated, all based on information obtained from a backend server und available in various pinia stores. Some of these calculations require access to the whole business object (mostly its id) to work.

Right now the templates for the forms look somewhat like this:

<div class="form-root">
   <my-text-field v-if="isFieldVisible('name')" v-model="businessObject.name" :disabled="isFieldDisabled('name')" :decoration="getFieldDecoration('name', businessObject.id)" />
  
   <my-number-field v-if="isFieldVisible('amount')" v-model="businessObject.amount" :disabled="isFieldDisabled('amount')" :decoration="getFieldDecoration('amount', businessObject.id)" />  
</div>

As you can see, the name of the field has to be specified quite often, with no build time check to ensure consistency with the v-model and each other.
Now I could change it so that the components have a prop named fieldName and another named businessObjectId, and calculate everything inside the component, so that forms might look like this:

<div class="form-root">
   <my-text-field v-model="businessObject.name" field-name="name" :business-object-id="businessObject.id" />
  
   <my-number-field v-model="businessObject.amount" field-name="amount" :business-object-id="businessObject.id" />  
</div>

This is an improvement, but there is still no guarantee, that the specified field-name and business-object-id corresponds to the v-model. In fact, copy-and-pasted code has often led to hard-to-notice errors because a field-name was wrong somewhere.

My idea now is to not give the specific field to edit as a v-model, but instead provide the entire BusinessObject as well as a BusinessObjectProperty with instances being defined as constants, looking somewhat like this:

export class BusinessObjectProperty<T> {
  fieldName: string
  getter: (businessObject: BusinessObject) => T
  setter: (businessObject: BusinessObject, value: T) => void
}

export namespace BusinessObject {
  export const NAME = new BusinessObjectProperty<String>('name', (b) => b.name, (b, v) => b.name = v)
  export const AMOUNT = new BusinessObjectProperty<Number>('amount', (b) => b.amount, (b, v) => b.amount = v)
}

I might then make my form template look like this:

<div class="form-root">
   <my-text-field :business-object="businessObject" :business-object-property="BusinessObject.NAME" />
  
   <my-number-field :business-object="businessObject" :business-object-property="BusinessObject.AMOUNT" />  
</div>

I could then calculate visibility and other information inside the component and also get/set the current value from the business object using the getter/setter.

This would dramatically simplify the definitions of forms, of which I have about a hundred, all of them with dozens of form fields.

What do you think? Is this a viable approach? Is this too far off from Vue's best practices? Will I get reactivity issues or other problems?
Do you have another idea how I could make the form definitions simpler and more robust?