Problem: I have a <select> that uses a v-model to save the selected options into an array. The problem is that I can't use the selected properties on one of the <options> because the v-model ingores that and instead uses the bound JavaScript as it's source of truth.

What I have tried: I tried looking up my problem on StackOverflow and I have found two questions but they didn't really help nor explain why and how. Here are the posts I have looked at:

using v-model on makes first option not appear in select - I tried this but nothing changed. My selected appear as selected but it was disabled.

Vue v-model with select input - the accepted answer wants me to define it in data and set it to null but that doesn't work when you take a quick glance at my code.

Code:

<select v-model="payload[index]" type="text">
    <option v-if="entry.system_role !== null" selected :value="entry.system_role">
        {{ entry.system_role }}
    </option>
    <option v-for="role in entry.roles" :key="entry.id" :value="role">
        {{ role }}
    </option>
</select>

That is the section with the select and as you can see the v-model is an array which I simply can't set to null. index is from a higher up v-for that renders the amount of <select>. I tried setting selected to disabled and :value="entry.system_role" to value="" and leaving it empty (but I need the value of this option). Is there anything I can do to make it work? Maybe with a computed or method?