Vue Select Label not Working Properly with it being Searchable

Question

I am using vue-select with the pagination and searchable options. When I click on the options without searching, the label prop (what the user sees) displays the correct text.

However, when I search, the label prop shows the value (that I am saving) instead of the specified text.

How can I make the v-select show the 'text' and not the code.value when it is being searched?

             <v-select
                v-model="primary_scenario_field"
                :options="paginated"
                :reduce="code => code.value"
                label="text"
                required
                searchable
                @search="handleVSelectSearch"
              >
               <li slot="list-header" class="pagination">
                  <b-button :disabled="!hasPrevPage" 
                    @click="handlePaginationClick('previous')"> 
                    Previous
                  </b-button>
                  <b-button :disabled="!hasNextPage" 
                    @click="handlePaginationClick('next')"> 
                    Next 
                  </b-button>
               </li>
            </v-select>

data ()
 {
      search: '',
      offset: 0,
      limit: 10,
      filtered: [],
      paginated: [],
      code_list: []
 },

  methods: {

   handlePaginationClick (direction){
      if(direction == 'next') this.offset = this.offset + 10;
      if(direction == 'previous') this.offset = this.offset - 10;
      this.$nextTick();
      this.paginated = this.paginateResults(this.filtered);
    },

    paginateResults (value){
      return value.slice(this.offset, this.limit + this.offset);
    },

    async handleVSelectSearch (query = ''){
      query = isString(query) ? query.trim().toUpperCase() : query.toUpperCase();
      this.filtered = this.filterResults(query);
      await this.$nextTick();
      this.offset = 10;
      this.handlePaginationClick('previous');
    },

    filterResults (value){
      return this.code_list.filter(item => item.text.includes(value));
    },

    **this.code_list options are getting loaded like this (in an array):
    { text: `${response.a}: ${response.b}`, value: response.id }

Answer 1

I ended up taking out the :reduce="code => code.value" and just parsing it manually before submission.