如何自定义Quasar的QSelect，使其在进行选择时以粗体显示文本和轮廓

<template>
  <q-select
    v-model="selected"
    :options="options"
    :option-label="label"
    :option-value="value"
    :outlined="outlined"
    :dense="dense"
    :borderless="borderless"
    :class="{ 'font-bold': boldText }"
    @input="onInput"
  />
</template>

<script>
import { QSelect } from 'quasar'

export default {
  name: 'CustomQSelect',
  components: {
    QSelect
  },
  props: {
    options: {
      type: Array,
      required: true
    },
    value: {
      type: String,
      required: true
    },
    label: {
      type: String,
      required: true
    },
    outlined: {
      type: Boolean,
      default: false
    },
    dense: {
      type: Boolean,
      default: false
    },
    borderless: {
      type: Boolean,
      default: false
    },
    boldText: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      selected: ''
    }
  },
  methods: {
    onInput(value) {
      this.$emit('input', value)
    }
  }
}
</script>

<template>
  <div>
    <custom-q-select
      v-model="selectedOption"
      :options="options"
      label="Select an option"
      :outlined="true"
      :bold-text="true"
    />
  </div>
</template>

<script>
import CustomQSelect from 'path/to/CustomQSelect.vue'

export default {
  components: {
    CustomQSelect
  },
  data() {
    return {
      selectedOption: '',
      options: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' },
        { value: 'option3', label: 'Option 3' }
      ]
    }
  }
}
</script>