title: Vue - Best way to draw large canvas based on Json data
body: <p><strong>What I'm building</strong><br />
  There is this game Path of Exile, that has a passive tree that i'm recreating in my Vue application with help from Pixi Js. The game developers release a json with the data for this passive tree every expansion for people to work with.</p>
  <p>The Tree: <a href="https://www.pathofexile.com/passive-skill-tree" rel="nofollow noreferrer">https://www.pathofexile.com/passive-skill-tree</a><br />
  The json: <a href="https://github.com/EmmittJ/SkillTree_TypeScript/blob/master/data/3.12.0-pre/SkillTree.json" rel="nofollow noreferrer">https://github.com/EmmittJ/SkillTree_TypeScript/blob/master/data/3.12.0-pre/SkillTree.json</a> (Don't forget to press the &quot;View raw&quot; link)<br />
  Sandbox i created with a variation where i tried to do it with fetch(): <a href="https://codesandbox.io/s/sharp-kalam-hzvt4?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer">https://codesandbox.io/s/sharp-kalam-hzvt4?fontsize=14&amp;hidenavigation=1&amp;theme=dark</a></p>
  <p><strong>The Problem</strong><br />
  While working with this json data and Pixi js to draw this tree i'm running into some performance issues. With all the different variations i tried i either get large memory leaks after a while (on this i'm most concerned), or the whole json is loaded in my production bundle so those files are huge, or both. At this point i tried so much stuff i'm not sure what to do anymore.</p>
  <p><strong>What i'm looking for</strong><br />
  I'm looking to build a <code>&lt;tree&gt;</code> component in my Vue app with the data from this json that is just static in a /data folder (will change every 3 months at max), and with that data run some functions to draw the passive tree on my canvas. When this tree is drawn i still want to be able to dynamically change things on the canvas. This what the structure of the site should look like for now:</p>
  <p><a href="https://i.stack.imgur.com/rWc9w.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rWc9w.png" alt="enter image description here" /></a></p>
  <p><strong>What i tried</strong><br />
  There are of course multiple ways to get the json data and work with it, but all seem to run in some kind of issues. I tried using Axios, Fetch, just a import, put it in my state, and put it in a static data object. But in the end i feel like my JS Heap always looks something like this:</p>
  <p><a href="https://i.stack.imgur.com/0pTp4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0pTp4.png" alt="enter image description here" /></a></p>
  <p><strong>Sandbox</strong><br />
  I created a sandbox with a variation where i load the data with fetch():<br />
  <a href="https://codesandbox.io/s/sharp-kalam-hzvt4?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer">https://codesandbox.io/s/sharp-kalam-hzvt4?fontsize=14&amp;hidenavigation=1&amp;theme=dark</a></p>
  <p>Anyone who can help me out how i should go about this?</p>