I think the main problem is the ESLint rule. What happens is, if one has this rule enabled with auto-fix, then the code from valid (.testProp="someReactiveValue") is changed to something that is invalid (.test-prop="someReactiveValue").

This forces the use of <!-- eslint-disable-next-line vue/attribute-hyphenation --> or else it'll be either an error or an assignment to a non-existent property of the target object.

the workaround is to add the .camel modifier, e.g. .test-prop.camel="someReactiveValue".

I'm running into a similar problem because of attribute name casing convention, and from what I found, there's a lot of people having similar issues.

I found these 2 comments that better describe the issue and point to a possible fix:

vuejs/docs#1972 (comment)
vuejs/docs#1972 (comment)

My specific use case is, I have a Vue component library that wraps a Custom Element library, like for example:

class MyElement extends HTMLElement {
  ...

  // Reflect primitive values
  get someString() {
    return this.getAttribute('some-string');
  }

  set someString(value) {
    if (value) this.setAttribute('some-string, value);
    else this.removeAttribute('some-string);
  }

  // Don't reflect complex objects
  get someComplexObject() {
    return this._someComplexObject;
  }

  set someComplextObject(value) {
    this._someComplextObject = value;
  }
}

<script setup lang="ts">
import './MyElement.js';

defineProps<{
  someString: string;
  someComplexObject: Record<string, string>;
}>();
</script>

<template>
  <my-element :some-string :some-complex-object></my-element>
</template>

In this example, the some-complex-object binding won't work, because Vue searches for 'some-complex-object' in MyElement (instead of 'someComplexObject' in MyElement), which returns false, and then ends up setting the object as an attribute, which renders as:

<my-element some-complex-object="[object Object]"></my-element>

So the alternatives are:

1. Use camelCase and disable vue/attribute-hyphenation or
2. Use .camel modifier for all hyphenated attribute bindings or
3. Find all hyphenated attributes that accept a complex data type and only add the .camel modifier for those

None of these seem very appealing to me. Since Vue does already case conversion in a lot of places, why not here as well to make our lifes easier?

I'm assuming that changing:

to:

return camelize(key) in el || key in el;

would fix this issue without introducing any breaking changes.

I'm happy to open a PR if that would be an acceptable solution.

@vonBrax PR welcome!