Throws run time error- filter is undefined on the page where qgrid is used.

[amexcompliance]

After installing the extension and adding q-grid the page stops loading and the browser console shows the error
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'filter')
at Proxy.setColumnsDefinition (QGrid.vue:217:17)
at Proxy.created (QGrid.vue:169:10)
at callWithErrorHandling (chunk-UDHLJWFM.js?v=c44ac796:1727:32)
at callWithAsyncErrorHandling (chunk-UDHLJWFM.js?v=c44ac796:1735:17)
at callWithAsyncErrorHandling (chunk-UDHLJWFM.js?v=c44ac796:1745:17)
at callHook (chunk-UDHLJWFM.js?v=c44ac796:4358:3)
at applyOptions (chunk-UDHLJWFM.js?v=c44ac796:4277:5)
at finishComponentSetup (chunk-UDHLJWFM.js?v=c44ac796:7776:7)
at handleSetupResult (chunk-UDHLJWFM.js?v=c44ac796:7730:3)
at setupStatefulComponent (chunk-UDHLJWFM.js?v=c44ac796:7699:7)

this is the q-grid definition
<q-grid
:rows="portfolioScoreCards"
:columns="columns"
row-key="key"
:columns_filter="true"
table-class="mytable"
table-header-class="header"

   rows-per-page-label="records/page"
  icon-first-page="mdi-home"
  icon-last-page="mdi-all-inclusive"
  icon-next-page="mdi-arrow-right"
  icon-prev-page="mdi-arrow-left"
  no-data-label="I can't find any data 😞"
    :loading="true"
  loading-label="Loading Portfolio Scorecards!"
  :global_search="true"
  :visible-columns="[
    'model', 'assetGroup', 'riskLevel', 'region', 'alpha', 'beta', 'ir', 'lpr',
    'm2', 'roi', 'risk', 'sor', 'std', 'cagr', 'maxdd', 'sharpe', 'var1', 'var2'
  ]"

  :pagination-label="(firstRowIndex, endRowIndex, totalRowsNumber) => {
    return `page ${endRowIndex}/${totalRowsNumber}`
  }"
@request="handleSort"

/>
I am on quasar , vite, vue 3 latest repo.

[pratik227]

Can you provide sample data as well ?