title: svelte:self tag is not rerendered properly
body: <p>so I've been trying to use the <code>&lt;svelte:self /&gt;</code> tag to create some recursive behaviour, in order to build something like a file browser. But it seems like the tag is not triggered by an update event or something.</p>
  <p>Firstly, I have a parent component that wraps the actual recursive and important one. The parent is used to define the dimensions of the browser component and pass it the necessary data, that shall be fetched from a database in future iterations.</p>
  <h4><code>Parent.svelte</code></h4>
  <pre><code>&lt;script&gt;
      import RecursiveChild from 'RecursiveChild.svelte';
  
      const data: any = [
          {
              label: 'general settings',
              options: [
                  {
                      label: 'test',
                  },
                  {
                      label: 'abc',
                  },
              ],
          },
          {
              label: 'orders',
              options: [
                  {
                      label: 'ladida',
                  },
                  {
                      label: 'haha',
                  },
              ],
          },
      ];
  &lt;/script&gt;
  
  &lt;div class=&quot;main&quot;&gt;
      &lt;RecursiveChild paths={data} /&gt;
  &lt;/div&gt;
  
  &lt;style lang=&quot;scss&quot;&gt;
      @import '../lib.scss';
  
      .main {
          @include fill();
  
          display: flex;
      }
  &lt;/style&gt;
  </code></pre>
  <p>Then I have my recursive child component, where I used the <code>&lt;svelte:self /&gt;</code> tag that shows the weird behaviour.</p>
  <h4><code>RecursiveChild.svelte</code></h4>
  <pre><code>&lt;script&gt;
      export let paths;
  
      let labels = paths ? paths.map((value) =&gt; value.label) : [];
  
      let pressedLabel: number;
      function handleClick(i: number) {
          pressedLabel = i;
      }
  &lt;/script&gt;
  
  &lt;div class=&quot;paths&quot;&gt;
      {#each labels as label, i}
          &lt;div class=&quot;label&quot; on:click={() =&gt; handleClick(i)}&gt;{label}&lt;/div&gt;
      {/each}
  &lt;/div&gt;
  
  {#if pressedLabel !== undefined}
      &lt;svelte:self paths={paths[pressedLabel].options} /&gt;
  {/if}
  
  &lt;style lang=&quot;scss&quot;&gt;
      .paths {
          display: inline-flex;
  
          flex-direction: column;
      }
  
      .label {
          margin: 25px;
          background-color: green;
      }
  &lt;/style&gt;
  </code></pre>
  <p>I've uploaded a video file of the behaviour <a href="https://drive.google.com/file/d/1xLdBU8IlmXtu-hxOjpOAl7WgozNgQ5jz/view?usp=sharing" rel="nofollow noreferrer">here</a>. As you can see, once one has clicked on any of the labels, the other one won't work anymore. I cannot explain myself why this would be the case. The expected behaviour would be that once you click on <code>general settings</code> the labels <code>test</code> and <code>abc</code> show up. Then, when <code>orders</code> is placed, <code>ladida</code> and <code>haha</code> should show up. But as explained nothing happens and <code>test</code> and <code>abc</code> continue to be rendered.</p>