Nesting updating components with svelte

Item.html

<li>{{value}}</li>

<script>
  export default {
    data() {
      return {
        value: 'XX'
      };
    },
    onrender() {
      console.log('rendering', this.get('item'));

      setInterval(() => {
        this.set({value: this.get('value') + 1});
      }, 500)

      this.observe('item', (item) => this.set({value: item}));
    }
  };
</script>

List.html

<ul>
  {{#each items as item}}
  <Item item={{item}} />
  {{/each}}
</ul>

<script>
  import Item from './Item.html';

  export default {
    data() {
      return {
        items: [3, 2, 1]
      };
    },
    onrender() {
      window.setTimeout(() => {
        console.log("Setting items")
        this.set({
          items: this.get('list')
        });
      }, 5000)
    },
    components: {
      Item
    }
  };
</script>

main.js

import Root from './Root.html';

const root = new Root({target: document.querySelector( 'body' )});

Root.html

<div>
  Root element
  <List list={{list}} />
</div>
<script>
  import List from './List.html';

  export default {
    data: () => ({
      list: [1, 2, 3, 4, 5]
    }),
    components: {
      List
    }
  };
</script>