Vue.js セレクトボックス 初期値を設定したい

食べ物が選べるセレクトボックスがあります。
セレクトボックスの初期値に食べ物を選択してください。という言葉を入れたいです。

と初期値を設定したのですが画面上では文字が表示されません。 どうやったらいいでしょうか? ご知識ある方ご教授お願いしたいです。
 <p class="create_text">
  <select v-model="selected" @change="onChange()">
    <option value="食べ物を選択してください。"></option>
    <option v-for="food in foods" :value="food"
      >{{food.name }}
    </option>
  </select>
</p>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import Food from '@/food.json'
import {Food } from '@/domain/Food'

@Component
export default class SelectBox extends Vue {
  selected: string = ''
  foods: Food[] = []

  mounted() {
this.setFood()
  }

  setLocation() {
this.foods=Food
  }

  onChange() {
this.$emit('changeFood', this.selected)
  }
}
</script>

<style lang="scss" scoped>
.create {
  padding: 16px;
&_text {
  width: 100%;
  box-sizing: border-box;
  background: white;
  option:first {
    color: #c7ced7;
  }
}
  }
}
select {
  width: 100%;
  background: url(../selectbox.svg) no-repeat;
}
</style>

// food.json
[
{
“name”: “卵”,
“value”: {
“id”: 1,
“best”: 32,
}
},
{
“name”: “ラー麺”,
“value”: {
“id”: 2,
“best”: 21,
}
},
{
“name”: “いちご”,
“value”: {
“id”: 3,
“best”: 40,
}
},