Nested component support

[davidjamesstone]

Hi @mardix - nice library. I really like the API.

I've been playing around with it though and I can't get nested components to work correctly. Can you see if I'm doing something incorrectly?

<script type="module">
  import Litedom from "//unpkg.com/litedom";

  Litedom({
    tagName: "hello-world",
    template: `
      <div>
        {this.greeting} {this.prop.name}!
        <hello-child name={this.greeting}></hello-child>
        <button @click="changeGreeting">Click</button>
      </div>`,
    data: {
      greeting: "Hello"
    },
    changeGreeting(event) {
      this.data.greeting = "Goodbye";
    }
  });
  Litedom({
    tagName: "hello-child",
    template: `<i>{this.foo} {this.prop.name}!</i>`,
    data: {
      foo: "Bar"
    }
  });
</script>

<hello-world name="Mardix"> </hello-world>

This code renders fine first time but if I click the button, the greeting state is changed, the component re-renders but the child component, <hello-child>, loses its data and props.

You can see it here

Anyone have any suggestions?