I'm trying to target nested JSON using svelte:self and encountering an issue where adding to the JSON will result in any newly added entries being deleted if they occur lower down the tree in the JSON structure. Here's an example REPL using the svelte:self demo. I'm clearly missing something with how I've specified where to add within the JSON?

<script>
let files = [
  {
    name: 'entry 1',
    files: [
      { 
        name: 'nested entry' 
      }
    ]
  },        
  { 
    name: 'entry 2' 
  }
];

function add() {
  files = files.concat({name: 'new item'})
}
</script>

<ul>
{#each files as file}
<li>
  {#if file.files}
    <svelte:self {...file}/>
  {:else}
    <File {...file}/>
  {/if}
</li>
{/each}
<li>
  <button on:click={() => add()}>new</button>
</li>
</ul>