Nested custom component loses scope

[titoBouzout]

On the following example, the second click function loses the scope and doesn't work. I presume is realted to this issue #31

live example https://codesandbox.io/s/mobx-nested-custom-component-with-spread-pfxo4?file=/index.js

import { render, Component, spread } from "mobx-jsx";

function Box(props) {
  let el = document.createElement("div");
  spread(el, () => props);
  return el;
}

class App extends Component {
  render() {
    return (
      <div>
        <div>
          <Box onClick={() => this.didClick()}>click me (this works)</Box>
        </div>
        <Box>
          <Box onClick={() => this.didClick()}>click me (this doesnt work)</Box>
        </Box>
      </div>
    );
  }
  didClick() {
    console.log("did click");
  }
}

render(() => <App />, document.getElementById("app"));

gets compiled as

  class App extends Component {
    render() {
      return (() => {
        const _el$ = _tmpl$.cloneNode(true),
              _el$2 = _el$.firstChild;

        insert(_el$2, createComponent(Box, {
          onClick: () => this.didClick(),
          children: "click me (this works)"
        }));

        insert(_el$, createComponent(Box, {
          get children() {
            return createComponent(Box, {
              onClick: () => this.didClick(),
              children: "click me (this doesnt work)"
            });
          }

        }), null);

        return _el$;
      })();
    }

    didClick() {
      console.log('did click');
    }
  }