title: quasar q-select use filter event as a common function not work
body: <p>I try this @filter event example</p>
  <p><a href="https://quasar.dev/vue-components/select#example--basic-filtering" rel="nofollow noreferrer">https://quasar.dev/vue-components/select#example--basic-filtering</a></p>
  <p>can work</p>
  <p>Index.vue</p>
  <pre><code>&lt;template&gt;
    &lt;q-select
      :options=&quot;options&quot;
      @filter=&quot;filter&quot;
      v-model=&quot;model&quot;
      use-input
    &gt;&lt;/q-select&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { defineComponent } from &quot;vue&quot;;
  import { computed, reactive, toRefs, ref } from &quot;vue&quot;;
  const selectedOptions = [&quot;Google&quot;, &quot;Facebook&quot;, &quot;Twitter&quot;, &quot;Apple&quot;, &quot;Oracle&quot;];
  
  export default defineComponent({
    name: &quot;PageIndex&quot;,
    setup() {
      let state = reactive({
        model: null,
        options: selectedOptions,
      });
  
      const filter = (val, update, abort) =&gt; {
        update(() =&gt; {
          const needle = val.toLowerCase()
          state.options = selectedOptions.filter(v =&gt; v.toLowerCase().indexOf(needle) &gt; -1)
        })
      }
  
      return {
        filter,
        selectedOptions,
        ...toRefs(state),
      };
    },
  });
  &lt;/script&gt;
  </code></pre>
  <p>I want to do common function from utils/filter.js but not work</p>
  <p>Index.vue</p>
  <pre><code>&lt;template&gt;
    &lt;q-select
      use-input
      :options=&quot;options&quot;
      @filter=&quot;
        (val, update, abort) =&gt;
          filter(val, update, abort, selectedOptions, options)
      &quot;
      v-model=&quot;model&quot;
    &gt;  &lt;/q-select&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { defineComponent } from &quot;vue&quot;;
  import { computed, reactive, toRefs, ref } from &quot;vue&quot;;
  import { filter } from &quot;../utils/filter&quot;;
  const selectedOptions = [&quot;Google&quot;, &quot;Facebook&quot;, &quot;Twitter&quot;, &quot;Apple&quot;, &quot;Oracle1&quot;];
  
  export default defineComponent({
    name: &quot;PageIndex&quot;,
    setup() {
      let state = reactive({
        model: null,
        options: selectedOptions,
      });
  
      return {
        filter,
        selectedOptions,
        ...toRefs(state),
      };
    },
  });
  &lt;/script&gt;
  
  </code></pre>
  <p>utils/filter.js</p>
  <pre><code>export function filter(val, update, abort, from, to) {
    update(() =&gt; {
      const needle = val.toLowerCase()
      to.value = from.filter((v) =&gt; v.toLowerCase().indexOf(needle) &gt; -1)
    })
  }
  
  </code></pre>
  <p>What to do to get filtering to work ?</p>
  <p>work version
  <a href="https://codesandbox.io/s/blissful-brattain-vd085n?file=/src/pages/Index.vue" rel="nofollow noreferrer">https://codesandbox.io/s/blissful-brattain-vd085n?file=/src/pages/Index.vue</a></p>
  <p>not work version
  <a href="https://codesandbox.io/s/blissful-brattain-vd085nv2-forked-feiv7v?file=/src/pages/Index.vue" rel="nofollow noreferrer">https://codesandbox.io/s/blissful-brattain-vd085nv2-forked-feiv7v?file=/src/pages/Index.vue</a></p>