why the Polymer custom data component can't send data

Question

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
    <dom-module id="my-data">
      <script>
      ( function () {
        let dataValue = [
          {num: 'T001', status: '4', bground: 'num-sub'},
          {num: 'T002', status: '4', bground: 'num-sub'},
          {num: 'T003', status: '4', bground: 'num-sub'},
        ];
    class MyData extends Polymer.Element {
      static get is() { return 'my-data'; }
      static get properties() { return {
        data: {
          type: Array,
          value: dataValue,
          readOnly: true,
          notify: true
        }
      }}
    }
    window.customElements.define(MyData.is, MyData);
      })();
      </script>
    </dom-module>

I create a custom element my-data.html just like above. Then the below is the usage in my-app.html. My-data could be rendered but the my-app.html seems can not got my-data's info with data: Array property.

 <my-data data="{{data}}"></my-data>
    <dom-repeat items="{{data}}" as="entry">
      <template>
        <my-num entry="[[entry]]" ></my-num>
      </template>
    </dom-repeat>
</template>
  <script>
    class MyApp extends Polymer.Element {
      static get is() { return 'my-app'; }
      static get properties() {
        return {
          data: {
            type: Array,
          }
        }
      }
    }
    window.customElements.define(MyApp.is, MyApp);
  </script>

Answer 1

You need to import my-data.html and my-num.html in your my-app.html first.

Example:

<link rel="import" href="my-data.html">
<link rel="import" href="my-num.html">

Also, id name in dom-module of my-num.html should be my-name not kvs-num.

Import dom-repeat as well in your my-app.html.

<link rel="import" href="../../bower_components/polymer/lib/elements/dom-repeat.html">

Demo here