Quasar 2: Using v-ripple directive in SFC defined with <script setup>

I'm trying Quasar v2.7.1 framework (with Vue 3, TypeScript, Pinia and Router) and want to use the syntax to define a SFCs how it's recomended in the official Vue 3 Docs. But as soon as I change component with v-ripple directive on any element inside it, I face following error:

TypeError: Cannot read properties of undefined (reading 'config') at updateModifiers (Ripple.js?v=eddf1594:65:45) at beforeMount (Ripple.js?v=eddf1594:112:9) at callWithErrorHandling (runtime-core.esm-bundler.js:155:22) at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:164:21) at invokeDirectiveHook (runtime-core.esm-bundler.js:2791:13) at mountElement (runtime-core.esm-bundler.js:5180:13) at processElement (runtime-core.esm-bundler.js:5110:13) at patch (runtime-core.esm-bundler.js:5030:21) at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5582:21) at ReactiveEffect.run (reactivity.esm-bundler.js:185:25)

If v-ripple directive removed - the problem doesn't appear again.

To reproduce just change the EssentialLink.vue component of the default Quasar boilerplate to

    <template>
     <q-item clickable tag="a" target="_blank" v-ripple>
        <q-item-section v-if="icon" avatar>
          <q-icon :name="props.icon" />
        </q-item-section>
    
        <q-item-section>
          <q-item-label>{{ title }}</q-item-label>
          <q-item-label caption>{{ caption }}</q-item-label>
        </q-item-section>
      </q-item>
    </template>
    
    <script setup lang="ts">
    const props = defineProps<{
      title: string;
      caption: string;
      link: string;
      icon: string;
    }>();
    </script>

The question is: is it my fault and I must declair v-ripple directive somehow else. Or it's a bug?