Selected attribute being removed from <option> in <select> element

[MichaelHeydon]

Considering the reproduction here: https://codepen.io/MichaelHeyDonny/pen/ExLmbNM

As there's no v-model linked to the select element, I would expect selected to still exist on the options. However it appears Vue's rendering is removing them. Is there a reason why?

Code:

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

  const msgs = ref(['1', '2', '3'])
  
  onMounted(() => {
    console.log(document.getElementById('test').innerHTML)
  })
</script>

<template>
      <select id="test" name="test" multiple tabindex="-1">
            <option
                v-for="(msg, index) in msgs"
                :key="index"
                :value="msg"
                selected="selected"
            >
                {{ msg }}
            </option>
        </select>
</template>

Console output:
"<option value='1'>1</option><option value='2'>2</option><option value='3'>3</option>"

[LinusBorg]

It's being set as a property on the element which works quite the same - but the browser doesn't reflect that as an attribute. If you need an attribute, use the .attr modifier.

https://vuejs.org/api/built-in-directives.html#v-bind

<template>
      <select id="test" name="test" multiple tabindex="-1">
            <option
                v-for="(msg, index) in msgs"
                :key="index"
                :value="msg"
                :selected.attr="'selected'"
            >

[MichaelHeydon]

Fantastic, thanks @LinusBorg