QItem not working under setup

[diadal]

What happened?

QItem not working under <script setup lang="ts">

<script setup lang="ts">
import { ref } from 'vue';

const TestList = ref(['Test1', 'Test2', 'Test3']);
</script>

<template>
  <div class="row text-center">
    <q-card class="my-card-m" flat>
      <q-card-section v-if="TestList.length">
        <q-list bordered separator class="overflow-auto">
          <q-item
            clickable
            v-ripple
            v-for="(item, index) in TestList"
            :key="index"
          >
            <q-item-section avatar>
              <q-btn round class="bg-white">
                <q-avatar
                  size="26px"
                  icon="mdi-bank"
                  color="primary"
                  text-color="white"
                >
                </q-avatar>
              </q-btn>
            </q-item-section>

            <q-item-section>
              <q-item-label lines="1" class="text-uppercase text-primary">
                {{ item }}
              </q-item-label>
            </q-item-section>
          </q-item>
        </q-list>
      </q-card-section>
    </q-card>
  </div>
</template>

What did you expect to happen?

it should without issue

Reproduction URL

no link

How to reproduce?

working fine with version 2.6.4

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

SPA Mode, Capacitor Mode

Platforms/Browsers

No response

Quasar info output

Operating System - Darwin(21.4.0) - darwin/arm64
NodeJs - 18.0.0

Global packages
  NPM - 8.6.0
  yarn - 1.22.18
  @quasar/cli - 1.3.2
  @quasar/icongenie - 2.5.2
  cordova - Not installed

Important local packages
  quasar - 2.7.1 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 1.0.1 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.14.0 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - 1.1.0 -- Official ESLint plugin for Quasar
  vue - 3.2.37 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.0.15
  pinia - 2.0.14 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  vite - 2.9.1 -- Native-ESM powered web dev build tool
  eslint - 8.17.0 -- An AST-based pattern checker for JavaScript.
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  @capacitor/core - 3.5.1 -- Capacitor: Cross-platform apps with JavaScript and the web
  @capacitor/cli - 3.5.1 -- Capacitor: Cross-platform apps with JavaScript and the web
  @capacitor/android - 3.5.1 -- Capacitor: Cross-platform apps with JavaScript and the web
  @capacitor/ios - 3.5.1 -- Capacitor: Cross-platform apps with JavaScript and the web

Quasar App Extensions
  *None installed*

Relevant log output

No response

Additional context

No response

[github-actions]

Hi @diadal! 👋

It looks like you provided an invalid or unsupported reproduction URL.
Do not use any service other than Codepen, jsFiddle, StackBlitz, Codesandbox, and GitHub.
Make sure the URL you provided is correct and reachable. You can test it by visiting it in a private tab, another device, etc.
Please edit your original post above and provide a valid reproduction URL as explained.

Without a proper reproduction, your issue will have to get closed.

Thank you for your collaboration. 👏

[diadal]

the issue is from node_modules/quasar/src/directives/Ripple.js. instance.$q: undefined

[yusufkandemir]

Closing in favor of #13154.