vue el-select绑定对象时,回显内容不正确,始终是最后一项的解决

<template>
  <div class="page-index">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
    >
      <el-form-item label="食物名称" prop="food">
        <el-select
          v-model="ruleForm.food"
          placeholder="请选择食物"
          @change="handleChange"
        >
          <el-option
            v-for="food in foodOptions"
            :key="food.id"
            :label="food.name"
            :value="food"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        food: {}
      },
      foodOptions: [
        {
          id: "食物1",
          name: "黄金糕"
        },
        {
          id: "食物2",
          name: "双皮奶"
        },
        {
          id: "食物3",
          name: "蚵仔煎"
        },
        {
          id: "食物4",
          name: "龙须面"
        },
        {
          id: "食物5",
          name: "北京烤鸭"
        }
      ],
      rules: {
        food: [{ required: true, message: "请选择具体食物", trigger: "blur" }]
      }
    };
  },
  methods: {
    handleChange(food) {
      console.log(food.name);
    }
  }
};
</script>

<el-select
    v-model="ruleForm.food"
    placeholder="请选择食物"
    value-key="id"
    @change="handleChange"
>
    <el-option
    v-for="food in foodOptions"
    :key="food.id"
    :label="food.name"
    :value="food"
    ></el-option>
</el-select>