Vue.js v-bind modifier .camel: fail to covert to camelCase

Question

I am new to Vue.js and have a basic question.

I use the modifier .camel and try to convert the attribute name "data-abc-def" (kebab-case) to "dataAbcDef"(camelCase), but the result I get is "dataabcdef", i.e., this string is in lowercase, not camelCase.

Following is the code snippet.

<div id="app">
  <a href="#" :data-abc-def.camel="id">${ text }</a>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    text: 'Hello World！',
    id: '123456789！'
  }
});

And the result I get...

Answer 1

.camel cannot be applied to arbitrary attributes, which data-* attributes are (it works with SVG's viewBox attribute; see this demo).

See this comment by Vue.js creator on an old issue, stating that:

Hmm, this is annoying because HTML parsing only preserves the camelCase for valid camelCase attributes […]

By the way, this was the issue that initiated the whole .camel feature.

In a later issue response, he says:

Avoid using camelCase when using in-DOM templates.