如何在vuejs中绑定带有输入的选择框？

<template>
  <div>
    <label for="fruit">选择你喜欢的水果：</label>
    <select id="fruit" v-model="selectedFruit">
      <option value="">请选择</option>
      <option value="apple">苹果</option>
      <option value="banana">香蕉</option>
      <option value="orange">橙子</option>
    </select>
    <p>你选择的水果是：{{ selectedFruit }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedFruit: '' // 初始化选择框的值为空
    };
  }
};
</script>