Bootstrap 4下拉列表中的复选框(使用vue.js打开)不可复选

<div id="app">
  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      选择
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <label class="dropdown-item" v-for="option in options" :key="option.id">
        <input type="checkbox" :id="option.id" v-model="selectedOptions" :value="option.value">
        {{ option.label }}
      </label>
    </div>
  </div>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      options: [
        { id: 1, label: '选项1', value: 'option1' },
        { id: 2, label: '选项2', value: 'option2' },
        { id: 3, label: '选项3', value: 'option3' },
      ],
      selectedOptions: [],
    },
  });
</script>