binding not workin with 'listData' prop

[valichek]

//somewhere.js
export class MyPage {
  bindable listData = null;
  someFunc() {
     this.listData = 'binded'
  }
}

<!-- somewhere.html -->
<template>
   <require from='./au-table'></require>
   <table list.bind="listData" listData.bind="listData" shit.bind="listData" class="table table-striped table-bordered table-hover"></table>
</template>

//au-table.js
import {bindable, customElement} from 'aurelia-framework';

@customElement('table')
export class AuTable {

  @bindable list = null; // ok
  @bindable listData = null; // not working
  @bindable shit = null; // fine
}

<!-- au-table.html -->
<template>

  list: ${list}
  listData: ${listData}
  shit: ${shit}

</template>

[jdanyow]

view-models (MyPage) should not have properties decorated with @bindable. The bindable decorator is intended to be used in custom elements.

[valichek]

My bad with copy-pasting, it looks like that

export class MyPage {
  listData = null;
  someFunc() {
     this.listData = 'binded'
  }
}

but the problem is with binding to AuTable.listData

[EisenbergEffect]

It should be list-data because HTML does not understand casing. All properties are lowercased and hyphenated.