Using <option :value="null"> does not work when you have 5 or more explicitly written option tags in the DOM

[baubie]

Vue version

3.5.10

Link to minimal reproduction

https://play.vuejs.org/#eNqFksFOwzAMhl/F5FKQxioEp6mdtI1JwIEhQOKSS2m9riNNqiQtm6q+O07KxkBou8X+Pzu/nbRsUlXDpkY2YpFJdVFZMGjrasxlUVZKW2hB4xI6WGpVQkBowCWXqZLGQmlyiJ1+HtyhEArelBbZWXDBZRT27agRBRbLSiQWKQKIVlfjtvXFXQffpziOQdZCUCoKCfCgQYGpheayVBmKmDMiOfMaqaqyhZIwahJRI4munNTbwtBdW1hIsY3CHvpTsqtICJ+cYN6JmZ5gUmJmJ5jMWfvF0Ir8fBRE4cGG2IBZQwteFvlwbZSkt2kdT/eosioE6oVvYjgbgVecltD+Px98zuoaB7t8usL045/82mxcjrMnjQZ1g5ztNZvoHG0vz18ecUPnvUhvUQuij4jPaJSonccem9YyI9sHnHd7739YIfNXM99YlGY3lDPqyM7znNGvmx0Z/cfu9fDG13HZse4LnnnyPA==

Steps to reproduce

Here's a simple reproduction:

<script setup>
import { ref } from 'vue'

const msg = ref('Hello World!')
</script>

<template>
  <h1>{{ msg }} {{ msg === null }}</h1>
  <select v-model="msg">
    <option :value="null">Display Only</option>
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
    <option value="d">D</option>
  </select>
</template>

If you select the first option, then the msg variable gets the value "Display Only". Removing the D option and it gets the value null. This is similar to a previous bug I reported (https://github.com/vuejs/core/issues/6568) but in this case it only seems to happen when using null as the value.

What is expected?

The value of the model should be null regardless of how many options I have.

What is actually happening?

Once you have 5 or more options, the value becomes the string in the HTML, not null.

System Info

No response

Any additional comments?

No response

[edison1105]

a workaround

export default defineConfig({
  plugins: [vue({
    template:{
      compilerOptions:{
        hoistStatic: false
      }
    }
  })],
})