Cycle.js mutable collection

gistfile1.js

import Cycle, {Rx, h} from 'cyclejs';

Cycle.registerCustomElement('x-element', function (rootElem$, props) {
  let vtree$ = props.get('list$').map((list) =>
    h('div', null, [
      h('ol', list.map((value) => h('li', null, value)))
    ]));

  rootElem$.inject(vtree$);
});

let vtree$ = Cycle.createStream(function (interaction$) {
  var clickMod$ = interaction$.choose('button', 'click')
    .map(() => String(Math.random()))
    // The following does not cause notification for props.get('list$')
    // although the data array has been modified
    .map(random => data => {
      data.push(random);
      return data;
    });
    // Concat will work as expected but not suitable for a large collection
    // which updates constantly
    // .map(random => data => data.concat(random));

  return clickMod$
    .startWith([])
    .scan((data, modifier) => modifier(data))
    .map(data => h('.root', null, [
      h('button', null, 'add new item'),
      h('x-element', { key: 0, list: data })
    ]));
});

let interaction$ = Cycle.createStream(function user(vtree$) {
  return Cycle.render(vtree$, '.js-container').interaction$;
});

interaction$.inject(vtree$).inject(interaction$);