title: How to use Svelte store with tree-like nested object?
body: <p>The Svelte official tutorial employs such complex object in <a href="https://svelte.dev/tutorial/svelte-self" rel="noreferrer">its document for <code>&lt;svelte:self&gt;</code></a></p>
  <pre class="lang-js prettyprint-override"><code>let root = [
      {
          type: 'folder',
          name: 'Important work stuff',
          files: [
              { type: 'file', name: 'quarterly-results.xlsx' }
          ]
      },
      {
          type: 'folder',
          name: 'Animal GIFs',
          files: [
              {
                  type: 'folder',
                  name: 'Dogs',
                  files: [
                      { type: 'file', name: 'treadmill.gif' },
                      { type: 'file', name: 'rope-jumping.gif' }
                  ]
              },
              {
                  type: 'folder',
                  name: 'Goats',
                  files: [
                      { type: 'file', name: 'parkour.gif' },
                      { type: 'file', name: 'rampage.gif' }
                  ]
              },
              { type: 'file', name: 'cat-roomba.gif' },
              { type: 'file', name: 'duck-shuffle.gif' },
              { type: 'file', name: 'monkey-on-a-pig.gif' }
          ]
      },
      { type: 'file', name: 'TODO.md' }
  ];
  </code></pre>
  <p>If this object needs to be reactive and placed inside a store, how should it be done? Should the tree be wrapped as a single store, or each file and folder is its own store and stores are nested accordingly?</p>
  <p>In both cases, it seems whenever the top-level properties are changed (svelte store considers update from objects always fresh), the whole tree will be checked for change?</p>