QSelect clears the selection on click with filter

[piovezan.f]

Hello, I’m new here, and I’m facing a problem for days and I don’t know how to solve it.
I use a multiple QSelect component that has options as return from an API using axes.
When I use QSelect without a filter it works perfectly, but when using the filter event when I click on QSelect to open the options, what was already selected in the model is “excluded” from the selection, I don’t know how to proceed with this situation.
Follow the code snippets;

data () {
    return {
      vehicleTypesOptions: [],      
      state: false
    }
,  
  created() {
    console.log()
    this.getNewAll(
      'vehicleTypes', 
      null,
      null,
      null,        
      null,
      null,        
      'id,name',
    ).then((response) => {
      this.state = true
      this.vehicleTypesOptions = response.data.data.data
    })
  },
methods: {    
    filterFn(val, update, abort) {  
        if (val === '') {     
        update(() => {
              this.vehicleTypesOptions = this.vehicleTypesOptionsDefault                           
          })
          return 
        } else {
            console.log('test')
        } 
    },
  },

<template>
<div>
<q-select
        filled
        v-model="vehicle_types"
        use-input
        input-debounce="0"
        label="Type"
        :options="vehicleTypesOptions"
        @filter="filterFn"
        multiple
        option-value="id"
        option-label="name"
        
      >
</div> 
</template>

[turigeza]

@piovezan-f
this.vehicleTypesOptions = response.data.data.data should be this.vehicleTypesOptionsDefault = response.data.data.data
and also
vehicleTypesOptionsDefault should be in data
like

data () {
    return {
      vehicleTypesOptions: [],
      vehicleTypesOptionsDefault: [],      
      state: false
    }

Please post a pen next time it is easier to trouble shoot like that.

[piovezan.f]

sorry for the confusion in the code, my current code is exactly the same as you passed it, I’m sending the code example again

data () {
    return {
      vehicleTypesOptions: [],
      vehicleTypesOptionsDefault: []      
      state: false
    }
,  
  created() {
    console.log()
    this.getNewAll(
      'vehicleTypes', 
      null,
      null,
      null,        
      null,
      null,        
      'id,name',
    ).then((response) => {
      this.state = true
      this.vehicleTypesOptionsDefault = response.data.data.data
    })
  },
methods: {    
    filterFn(val, update, abort) {  
        if (val === '') {     
        update(() => {
              this.vehicleTypesOptions = this.vehicleTypesOptionsDefault                           
          })
          return 
        } else {
            console.log('test')
        } 
    },
  },

<template>
<div>
<q-select
        filled
        v-model="vehicle_types"
        use-input
        input-debounce="0"
        label="Type"
        :options="vehicleTypesOptions"
        @filter="filterFn"
        multiple
        option-value="id"
        option-label="name"
        
      >
</div> 
</template>