如何使用VeeValidate验证由按钮组成的自定义选择组件？

<template>
  <div>
    <ValidationProvider rules="required" v-slot="{ errors }">
      <custom-select></custom-select>
      <span>{{ errors[0] }}</span>
    </ValidationProvider>
  </div>
</template>

<template>
  <ValidationObserver v-slot="{ invalid }">
    <button v-for="option in options" :key="option.value" @click="select(option.value)" :class="{ active: selected === option.value }">
      {{ option.label }}
    </button>
    <input type="hidden" v-model="selected" />
    <button @click="submit" :disabled="invalid">Submit</button>
  </ValidationObserver>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { label: 'Option 1', value: 'option1' },
        { label: 'Option 2', value: 'option2' },
        { label: 'Option 3', value: 'option3' }
      ],
      selected: ''
    };
  },
  methods: {
    select(value) {
      this.selected = value;
    },
    submit() {
      // 处理提交逻辑
    }
  }
};
</script>