Vue.jsの動的引数が機能しない

Vue.js 2.6.0以降で利用できる動的引数について。
公式ドキュメントのチュートリアルを進めていたらエラーが出ました。
https://vuejs.org/v2/guide/syntax.html#Dynamic-Arguments

vue.js:634 [Vue warn]: Property or method "attributename" >is not defined on the instance but referenced during >render. Make sure that this property is reactive, either >in the data option, or for class-based components, by >initializing the property

vue.js:634 [Vue warn]: Invalid value for dynamic >directive argument (expected string or null): undefined

ソース

<div id="app">
  <a v-bind:[attributeName]="url">hoge</a>
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      url: 'http://hoge.com',
      attributeName: 'href'
    },
  })
</script>

原因はv-bindに渡している変数名attributeName。
DOM内テンプレート(直接HTML書いたテンプレート)では、ブラウザが属性名を
小文字として認識するので、attributenameがない！ってなってるみたいです。

なのでDOM内テンプレートを使う場合、変数名を全部小文字attributenameにすればOKです。
webpackを利用している場合は事前にコンパイルされるので問題ないようです。(※試してません)

<div id="app">
  <a v-bind:[attributename]="url">hoge</a>
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      url: 'http://hoge.com',
      attributename: 'href'
    },
  })
</script>

ドキュメントをしっかり読むと、ちゃんと記載されてます。
https://vuejs.org/v2/guide/syntax.html#Dynamic-Arguments

in-DOM テンプレート (すなわち、HTML ファイルに直接書かれるテンプレート) を使う場合、ブラウザが強制的に属>性名を小文字にするため、キー名を大文字にするのは避けるべきです:

つまり、DOM内テンプレート使うときはちゃんとブラウザの属性名として有効な文字にしなさいよ。ってことですかね。