Fix #1846: useStateful works with modelValue

[Derranion]

Description

Closes #1846

useStateful now works correctly with modelValue - previously modelValue updates were ignored completely.

Types of changes

• Bug fix (non-breaking change which fixes an issue)

[RVitaly1978]

Maybe it will work the same?

Suggested change

	const modelValueRef = toRef(props, 'modelValue')
	const statefulRef = toRef(props, 'stateful')
	let unwatchModelValue: Function
	const watchModelValue = () => {
	unwatchModelValue = watch(modelValueRef, (modelValue) => {
	valueState.value = modelValue
	})
	}
	watch(statefulRef, (stateful: boolean) => {
	stateful ? watchModelValue() : unwatchModelValue?.()
	}, { immediate: true })
	watch([() => props.stateful, () => props.modelValue], ([stateful, modelValue]) => {
	if (stateful && modelValue !== undefined) {
	valueState.value = modelValue
	}
	}, { immediate: true })

[Derranion]

This will never work because props.stateful and props.modelValue are not refs.

If we will make them refs, to make it work, there will be other issue - we will always have additional watcher for modelValue in every component when it is not needed.

Which is not optimal.

[RVitaly1978]

I updated my suggestion: replaced props with functions:
watch([() => props.stateful, () => props.modelValue], ([stateful, modelValue]) => {...

[Derranion]

Ok then

"there will be other issue - we will always have additional watcher for modelValue in every component when it is not needed.

Which is not optimal."

[RVitaly1978]

If there are no cases where stateful can change dynamically, we can do this:

if (props.stateful) {
  watch(() => props.modelValue, (modelValue) => {
    if (modelValue !== undefined) {
      valueState.value = modelValue
    }
  }, { immediate: true })
}

otherwise we can update your solution a bit:

let unwatchModelValue: Function

const watchModelValue = () => {
  unwatchModelValue = watch(() => props.modelValue, (modelValue) => {
    if (modelValue !== undefined) {
      valueState.value = modelValue
    }
  }, { immediate: true }) // to handle if passed defaultValue
}

watch(() => props.stateful, (stateful) => {
  stateful ? watchModelValue() : unwatchModelValue?.()
}, { immediate: true })

[Derranion]

Stateful can be changed by the user any time.

undefined can be a valid modelValue in some cases.

Passed defaultValue is handled immediately here:
const valueState = ref(defaultValue === undefined ? props.modelValue : defaultValue) as Ref<T>

I've moved refs to functions though, indeed slightly less verbose but less explicit as well.