fix(VDataTable): allow grouping by nested keys

fixes #10323

packages/vuetify/src/components/VData/__tests__/VData.spec.ts

@@ -96,6 +96,32 @@ describe('VData.ts', () => {
     }))
   })
 
+  it('should group items by deep keys', async () => {
+    const render = jest.fn()
+    const items = [
+      { id: 1, text: 'foo', foo: { bar: 'one' } },
+      { id: 2, text: 'bar', foo: { bar: 'two' } },
+      { id: 3, text: 'baz', foo: { bar: 'one' } },
+    ]
+
+    const wrapper = mountFunction({
+      propsData: {
+        items,
+        groupBy: ['foo.bar'],
+      },
+      scopedSlots: {
+        default: render,
+      },
+    })
+
+    expect(render).toHaveBeenCalledWith(expect.objectContaining({
+      groupedItems: {
+        one: [items[0], items[2]],
+        two: [items[1]],
+      },
+    }))
+  })
+
   it('should group items with a custom group function', async () => {
     const render = jest.fn()
     const items = [

packages/vuetify/src/util/helpers.ts

@@ -263,9 +263,10 @@ export function groupItems<T extends any = any> (
   groupDesc: boolean[]
 ): Record<string, T[]> {
   const key = groupBy[0]
-  return items.reduce((rv, x) => {
-    (rv[x[key]] = rv[x[key]] || []).push(x)
-    return rv
+  return items.reduce((acc, item) => {
+    const val = getObjectValueByPath(item, key)
+    ;(acc[val] = acc[val] || []).push(item)
+    return acc
   }, {} as Record<string, T[]>)
 }