I am writing a giant form and I am trying to simplify the HTML. I am using Ant Design Vue. I am trying to convert this:

// this works but is bloated and has repetition
<a-form-model-item prop="value1" htmlFor="value1">
  <a-input v-model="form.value1" name="value1" id="value1" />
</a-form-model-item>

into this

// more concise and vue-ish
<a-form-model-item v-bind="formProps('value1')">
  <a-input v-bind="inputProps('value1')" />
</a-form-model-item>

<script>
  ...
  formProps(key){return {
    prop: key,
    htmlFor: key,
  }},
  inputProps(key){return {
    "v-model": this.form[key],   <---- this doesn't work
    name: key,
    id: key,
  }},
  ...
</script>

All the props bind properly except v-model. When I look at the vue-dev tools, the v-model shows up in $attrs. Is there a way to dynamically bind another vue directive? Or is this a pipe dream? Still kind of new to vue. Obviously, its not essential I do it this way, just wanted to know/learn more and I couldn't figure it out from the docs.