Vue.jsでカスタムデータ属性を使う

リストの一つ一つの要素にカスタムデータ属性を指定する。
以下のようにv-bind:を使う(以下は省略表記の:を使っている。)

<ul>
    <li v-for="(value, key) in lists" :data-order-id="value.id">
        {{ key }}：{{ value }}
    </li>
</ul>

このデータをJavascript側で使う

mounted: function () {
    let li = $('ul > li');

    // 一つ一つのli要素に対して処理
    li.each(function () {
        // 通常と同じように.dataでアクセス出来る
        console.log($(this).data('orderId')) // value.idの値が順番にconsoleに表示される
    });
}

:data-order-idではなくdata-order-idだとエラーになりました。