CompleteExampleBraveSelect.vue

<template>
 <div>
    <BraveSelect class="me-3" v-model="selectValue" :options="options" dropdown-class="shadow rounded border list-group bg-white">
      <template v-slot:button="{ selectedValue }">
        <div  role="button" class="btn btn-primary text-white px-3 d-flex ">
           <div v-if="selectedValue!=null">
            <strong>{{ selectedValue.name }} </strong>  is written in <strong>  {{ selectedValue.language }}</strong> 
           </div>
           <div v-else>
             Select a Value
          </div>
          <i class="ms-2 bi bi-chevron-down"></i>
        </div>
      </template>
      <template v-slot:menu="{ option,selectedValue }">
          <div role="button" :class="{active:JSON.stringify(selectedValue)==JSON.stringify(option)}" class=" border-0 list-group-item list-group-item-action">{{option.name}}</div>
      </template> 
    </BraveSelect>
  </div>
</template>

<script>
// @ is an alias to /src
import BraveSelect from "BraveVue"

export default {
  name: 'Home',
  components: {
    BraveSelect
  },
  data(){
    return {
        selectValue : { name: 'Vue.js', language: 'JavaScript' },
        selectValue2 : null,
        options: [
        { name: 'Vue.js', language: 'JavaScript' },
        { name: 'Rails', language: 'Ruby' },
        { name: 'Sinatra', language: 'Ruby' },
        { name: 'Laravel', language: 'PHP', $isDisabled: true },
        { name: 'Phoenix', language: 'Elixir' }
      ]
    }
  }
}
</script>