Vue多选模板插槽清除不起作用

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        <input type="checkbox" :value="item" v-model="selectedItems" />
        <span>{{ item }}</span>
        <!-- 使用具名插槽来插入自定义内容 -->
        <template #customSlot>
          <!-- 清除按钮，点击时调用clearSelection方法 -->
          <button @click="clearSelection(item)">清除</button>
        </template>
      </li>
    </ul>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const items = ['Item 1', 'Item 2', 'Item 3'];
    const selectedItems = ref([]);

    function clearSelection(item) {
      // 使用filter方法移除选中的项
      selectedItems.value = selectedItems.value.filter(selectedItem => selectedItem !== item);
    }

    return {
      items,
      selectedItems,
      clearSelection
    };
  }
};
</script>