Set a default selected option in vueJS select list

Question

In my vueJS application I have following select option in a form

<!-- Schedule type -->
<div class="container mx-auto flex bg-white px-6 py-1 space-x-2">
    <dashboard-input-label class="col-sm-2 mb-2 w-full" identifier="schedule_type">
        Schedule type
    </dashboard-input-label>
    <div class="col-sm-10 mb-6 w-full">
        <validator-v2
            :identifier="identifier"
            :rules="rules.schedule_type"
        >    
            <cs-dashboard-select
                :options="[
                    { value: '1', label: 'On duty'},
                    { value: '2', label: 'On vacation'},
                    { value: '3', label: 'Training'},
                    { value: '4', label: 'Sick leave'},
                ]"
                name="schedule_type"
                v-model="selectedValue"
            > Select type
            </cs-dashboard-select>
        </validator-v2>
    </div>    
</div>
<!-- Schedule type -->

How can I make the option 1, On duty as the default selected value?

I tried using

{ value: '1', label: 'On duty', selected},

but it was not working....

Answer 1

you directly bind value with selectedValue.

data(){
   return {
      selectedValue : '3'
   }
}

if default value is based on props than,

props: {
  selecedValue : {
      default: '3',
      type: String,
  }