Nodes as computed property breaks the component; "reading 'parentNode'" issue

[scscgit]

When clicking on root nodes, they don't open or close; the only needed modification to your example code is changing nodes from data to computed property:

• https://codesandbox.io/s/basic-forked-6858hx?file=/src/App.vue

I'm also getting console errors, though they don't show in codesandbox:

• During initialization, once per root node: Uncaught (in promise) TypeError: node.value.state is undefined
• When clicking on a root node: Uncaught TypeError: node.value.state is undefined

When I add state: {} to each node, the error disappears, but I still can't interact with root nodes.

When I add state: { opened: true } to each node, I still can't interact, but at least they are all initially open.

---

✔️ The solution is to explicitly open the nodes by using something like @node-toggle="(node: ItemType) => open[node.id] = !open[node.id]" and assign the state within computed property.

• ❗ We must duplicate id inside object, because the node's object key isn't available in event.
• 📔 (Adding @node-focus also lets us open the node by clicking on its name - I'd prefer the option to opt-in to this behavior even implicitly, without having to use state.)

---

User experience: de-focus, closing and opening a root node registers it as a double-click and selects text in children

---

I also have a major issue, making this component completely unusable: when there are many reactive changes to the elements, under some circumstances, I start receiving errors like these, for example when I click to expand a parent node (it won't expand):

Sadly, I was unable to reproduce this as a minimum repro project, as it only happens when I use the component in my existing, larger project (where I had previously used Vuetify 2's component), thus I don't know the root cause of this. There is a certain number of reactive updates that must be performed before the issue manifests, it doesn't happen under simple scenarios. I'm giving up on this component, hoping for Vuetify 3 to implement it soon.

[N00ts]

I'm sorry but since you can't reproduce, I'm affraid I can't do anything for you :/