Version

3.5.25

Reproduction link

jsfiddle.net

Steps to reproduce

1. Note the empty state "Nothing Selected"
2. Click the "Set value to 1" button
3. Click the "Set value to null" button

What is expected?

The value passed to the custom element should benull and"Nothing Selected" is rendered.

What is actually happening?

The value is converted to0 before passing it to custom element and"First Selected" is rendered.

We (me and@per-toyra-stratsys) stumbled upon this potential issue when building manual Vue wrappers for a web component list box.undefined is used to represent that nothing is selected and is a valid value to pass to the web component. The offending code is probablyhttps://github.com/vuejs/core/blob/v3.5.25/packages/runtime-dom/src/modules/props.ts#L58-L71.

The issue is broader than the reproduction shows. Other notable issues when prop changes type:

• When a prop changes fromtrue to'' the value is changed totrue so nothing happens.
• When a prop is changed from'a' tonull the value is changed to''.

null andundefined both trigger the same condition sonull is used for clarity in the reproduction.

We can work around the issue by manually setting the property of the web component in aonBeforeUpdate hook so that the check herehttps://github.com/vuejs/core/blob/v3.5.25/packages/runtime-dom/src/modules/props.ts#L59 returnsundefined.