Vuetify: [Bug Report] Closing a filtered v-treeview node is slow with a lot of items

[James-Hudson3010]

Environment

Vuetify Version: 2.3.4
Vue Version: 2.6.11
Browsers: Safari 13.1.1
OS: Mac OS 10.15.5

Steps to reproduce

When not filtering, open and close of the _Core Team_ node is fast. Type 9 into the search field and it slows to a crawl, especially when closing.

The problem is trivially reproducible using the Searching a Directory example as the base.

Expected Behavior

It should be fast to open and close with and without a filter applied

Actual Behavior

It is slow

Reproduction Link

https://codepen.io/james-hudson3010/pen/mdVzmzV

[KaelWD]

This is from #6124

The culprit seems to be this.treeview.isExcluded(this.key) in VTreeViewItem's render function, removing this and filtering in the children computed property instead yields a 1000x speedup when closing an item with many children.

@nekosaur is there any particular reason we're hiding filtered items with css instead of just not rendering them?

With changes:

diff --git a/packages/vuetify/src/components/VTreeview/VTreeviewNode.ts b/packages/vuetify/src/components/VTreeview/VTreeviewNode.ts
index 6c5925acb..83d213bcc 100644
--- a/packages/vuetify/src/components/VTreeview/VTreeviewNode.ts
+++ b/packages/vuetify/src/components/VTreeview/VTreeviewNode.ts
@@ -128,7 +128,8 @@ const VTreeviewNode = baseMixins.extend<options>().extend({
       return getObjectValueByPath(this.item, this.itemKey)
     },
     children (): any[] | null {
-      return getObjectValueByPath(this.item, this.itemChildren)
+      const children = getObjectValueByPath(this.item, this.itemChildren)
+      return children && children.filter((child: any) => !this.treeview.isExcluded(getObjectValueByPath(child, this.itemKey)))
     },
     text (): string {
       return getObjectValueByPath(this.item, this.itemText)
@@ -358,7 +359,6 @@ const VTreeviewNode = baseMixins.extend<options>().extend({
         'v-treeview-node--rounded': this.rounded,
         'v-treeview-node--shaped': this.shaped,
         'v-treeview-node--selected': this.isSelected,
-        'v-treeview-node--excluded': this.treeview.isExcluded(this.key),
       },
       attrs: {
         'aria-expanded': String(this.isOpen),

[nekosaur]

Mm I can't remember if there was a reason. But this change seems like a no-brainer.