Element UI select doesn't work with object as value

Question

I am trying to use Element UI's Select with whole objects as values. As you can see in my sample, the selected value is changing but the label of current value doesn't. I have no idea why. Also, all labels in select options are bold, but it should be only selected one.

script:

data() {
  return {
    options: [
      {
        id: 1,
        type: 'USER',
        age: 15
      }, {
        id: 2,
        type: 'ADMIN',
        age: 22
      }
    ],
    value: null
  }
}

template:

  <el-select v-model="value" placeholder="Select">
    <el-option
      v-for="item in options"
      :key="item.id"
      :label="item.type"
      :value="item">
    </el-option>
  </el-select>

Demo: https://codepen.io/peter-peter-the-typescripter/pen/qBNeKEp

Answer 1

Based on select-attributes just add value-key="id" to select component to give the select an unique identifier :

<el-select v-model="value" placeholder="Select" value-key="id">