[Vuejs]-Vuejs select default option does not work

selected attribute no longer makes sense when you using v-model.

You can’t use selected attribute if you are using v-model on the <select>, Set the v-model value to the default value instead:

<template>
  <div id="app">
    <select id="plans" class="form-control" v-model="company.plan_id">
      <option v-for="plan in plans" :value="plan.id" :key="plan.id" :selected="plan.default">{{plan.name}}</option>
    </select>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      company: {
        plan_id: 18
      },
      plans: [
        { id: 20, name: "test" },
        { id: 19, name: "haha" },
        { id: 18, name: "okok" }
      ]
    };
  }
};
</script>

Demo here: https://codesandbox.io/s/beautiful-sound-gxmzu?file=/src/App.vue