Quasar Select how to rewrite this using **options** api?

How to rewrite this using options api?

<script>
import { ref } from 'vue'

const stringOptions = [
  'Banana', 'Pear', 'Mango', 'Apple'
]

export default {
  setup () {
    const options = ref(stringOptions)

    return {
      model: ref(null),
      options,

      filterFn (val, update, abort) {
        update(() => {
          const needle = val.toLowerCase()
          options.value = stringOptions.filter(v => v.toLowerCase().indexOf(needle) > -1)
        })
      }
    }
  }
}
</script>

I'm still learning vue js. Options api is very convenient and structured, but so far I don’t quite understand how to implement such logic.

When going from Composition to Options API, reactive data goes in the data option, functions go in the methods option. An expression like foo.value is replaced with this.foo

<script>
const stringOptions = ['Banana', 'Pear', 'Mango', 'Apple']
export default {
  data() {
    return {
      options: stringOptions,
      model: null
    }
  },
  methods: {
    filterFn (val, update, abort) {
      update(() => {
        const needle = val.toLowerCase()
        this.options = stringOptions.filter(v => v.toLowerCase().indexOf(needle) > -1)
      })
    }
  }
}
</script>