[Vuejs]-Selected option no longer updates Vue

Remove the selected attribute of the option tag. The selected attribute specifies that an option should be pre-selected when the page loads

This links may help:

1. https://vuejs.org/guide/essentials/forms.html#select
2. https://www.w3schools.com/tags/tag_option.asp

To update the prop from the child try .sync modifier:

Parent component:

<ParentComponent 
 :cabin="cabin" 
 :selectedCabinType.sync="selectedType" // selectedType will update every time child component selects type
</ParentComponent>

<script>
 data() {
  return {
   // ... your data
   selectedType: '', // or provide the default type
  }
 },
</script>

Child component:

<select v-model="selectedType" @change="onTypeChange($event)">
  <option v-for="type in types" :key="type :selected="selectedType = cabin.type">
    {{type}}
  </option>
</select>

<script>
export default {
  name: 'CabinsDetail32',
  props: ['cabin', 'selectedCabinType'],
  data () {
    return {
      types: [
        'GEAR',
        'SMALLDT',
        'SMALL',
        'LARGE',
        'FAMILY'],
      selectedType: this.type
  },
  methods: {
   onTypeChange(e) {
    this.$emit('update:selectedCabinType', e)
   }
  }
}
</script>