vs__selected element does not appear on refresh/page change with simple :value set (v4 Beta)

[merlinstardust]

Please respect maintainers time by filling in these sections. Your issue will likely be closed without this information.

• Vue Version: 3.3.4
• Vue Select Version: 4.0.0-beta.6

Describe the bug Even with a very basic setup, the vs__select element does not appear when changing the page or on app start.

Reproduction Link I built this repo fresh to show this bug

https://github.com/merlinstardust/vue-select-error/blob/main/src/components/TheWelcome.vue#L21

Steps To Reproduce Create a project and install vue-select beta

npm init vue@latest
npm i
npm install vue-select@beta
npm run format

Add these lines into the appropriate sections

const items = ['C5', 'C6', 'C7', 'C8']; // script section
<VueSelect class="custom-styles" :options="items" :value="'C7'" /> // template section

Expected behavior When starting the app, C7 should already be selected and this element's code should be in the DOM

<span class="vs__selected">C7<!----></span>

Screenshots As you can see in the screenshot, the containing div does show value="C7" but there is no span with vs__selected and C7 inside it.

[e1jo]

same problem! Not transferable: :value

DEMO: codepen

Expected behavior DEMO (Vue version) : codepen

[e1jo]

UPDATE: I did research props inside select component and saw that we need to pass another prop: :modelValue insted :value This way it worked on my work project:)

[petitkriket]

legit issue, the v4 docs should be updated to reflect this change and point to modelValue (vue 3) instead of value (vue 2)