fix(compat): do not auto invoke scoped slots when accessed via $slots

[andreww2012]

The problem

If the component has a render function and uses this.$slots.name expression somewhere, this usage might throw if name is used as a scoped slot and the data the slot passes is destructured.

Why this happens?

If RENDER_FUNCTION compat feature is enabled and the component is using a render function (_compatWrapped), all $slots.name accesses will be intercepted by a proxy which will auto-invoke the corresponding function with no arguments:

core/packages/runtime-core/src/compat/instance.ts

Lines 96 to 105 in c0c9432

	$slots: i => {
	if (
	isCompatEnabled(DeprecationTypes.RENDER_FUNCTION, i) &&
	i.render &&
	i.render._compatWrapped
	) {
	return new Proxy(i.slots, legacySlotProxyHandlers)
	}
	return __DEV__ ? shallowReadonly(i.slots) : i.slots
	},

If these arguments are destructured by a component user, this weird runtime error will occur: (destructured parameter) is undefined in Firefox or Cannot destructure property '<property name>' of 'undefined' as it is undefined in Chromium.

The fix

This PR attempts to resolve the issue by avoiding invoking the slot if it has _ns (non-scoped slot) flag.

Real-world examples

• I'm trying to migrate to Vue 3 a legacy project with [email protected] using @vue/compat. This line, for example, is only intending to check the slot presence, but ends up invoking it with no arguments and undefined is ended up being destructured in user code.

• The other one: TypeError: Cannot destructure property 'element' of 'undefined' as it is undefined SortableJS/vue.draggable.next#122

I think this fix should not break the existing code which is written and used correctly because

• If a slot was never intended to be used as a scoped slot but is used as such, that is a component user's mistake - and runtime errors in this case are a possibility (for example caused by non auto-invoking $slots.name)
• If a slot can be used as a scoped and a non-scoped one, it is lib author's responsibility to use $slots or $scopedSlots respectively (which vuetify actually does).