[Bug Report][3.0.0] [V-Buttons-Toggle] Ref - Desync & Relative – Do Not Set Values

[BlackYuzia]

Environment

Vuetify Version: 3.0.0-beta.3
Vue Version: 3.2.36
Browsers: Chrome 102.0.0.0
OS: Windows 10

Steps to reproduce

1. Open page
2. Go to /bug-001
3. Try click buttons
4. Profit! You find bugs...

Expected Behavior

reactive and ref both work for array select

Actual Behavior

reactive - didn't work
ref - partialy work, has bugs if you set any values by default

Reproduction Link

Fast reproduce link
Source

Example

[KaelWD]

ref: looks ok to me, all three buttons are active initially
reactive: expected, item groups don't modify the original array: https://vuejs.org/guide/essentials/reactivity-fundamentals.html#limitations-of-reactive

[BlackYuzia]

@KaelWD

Currently, this bug show on 100-500 ms and then work's fine.
If you disable javascript, you see this bug.

UPD: I don't sure, but maybe, reason of that bug is an SSR?

reactive: expected,

Okey, then that not a bug 👀

[KaelWD]

This is caused by the internal group model having a dependency on the items array, which is empty on the first render

vuetify/packages/vuetify/src/composables/group.ts

Lines 157 to 161 in 0ad9d7f

	v => {
	if (v == null) return []
	return getIds(items, wrapInArray(v))
	},

[BlackYuzia]

This is caused by the internal group model having a dependency on the items array, which is empty on the first render

Suppose, #15202 also have the same trouble?

[BlackYuzia]

I set mode to private for my repo with sources, the same as before issues, if you require sources — call me.

[johnleider]

How do I test this locally? Is it only present in NUXT? The repo links are 404 for me.

[BlackYuzia]

@johnleider you mean source or reproduction link?

UPD: I open repo (as public). But, a bit later ( a few days ) I will close it again

[KaelWD]

There is a playground in #15215