[Bug Report][2.5.8] VSlideGroup: overflow arrows do not show up if the slide group is initially invisible

[Goshin]

Environment

Vuetify Version: 2.5.8
Vue Version: 2.6.11
Browsers: Chrome 94.0.4606.61
OS: Mac OS 10.15.7, Android

Steps to reproduce

1. click the 'Show bug' button.

Expected Behavior

The overflow arrow indicators should show up with the slide group as it overflows its container v-sheet.

Actual Behavior

The arrows do not show up until click on an item.

Reproduction Link

https://codepen.io/Kohn1/pen/KKqGjme

Other comments

vuetify/packages/vuetify/src/components/VSlideGroup/VSlideGroup.ts

Lines 429 to 437 in 4c3e561

	this.widths = {
	content: content ? content.clientWidth : 0,
	wrapper: wrapper ? wrapper.clientWidth : 0,
	}
	// https://github.com/vuetifyjs/vuetify/issues/13212
	// We add +1 to the wrappers width to prevent an issue where the `clientWidth`
	// gets calculated wrongly by the browser if using a different zoom-level.
	this.isOverflowing = this.widths.wrapper + 1 < this.widths.content

A possible cause might be that this.isOverflowing is not correctly calculated when the element is hidden, in which case content.clientWidth would be 0. A solution I can come up with is to watch the visibility changes and re-calculate this.isOverflowing when there is a change (with Intersection Observer API or something; might sound a little heavy).

A workaround: invoke .onResize() or .setWidths() after changing visibility.

<v-btn @click="show = true; $refs.group.setWidths()">