Quasar-tabs error - Unhandled error during execution of scheduler flush. & TypeError: Cannot read properties of undefined (reading 'left')

[Chetansuri7]

I am trying to add tabs within a page. As soon I add q-tabs code in template, i get error and warnings. Any guidance for this to run.

<template>
  <q-tabs v-model="tab"></q-tabs>
</template>

<script>
import { ref } from 'vue'

export default {
  setup () {
    return {
      tab: ref('mails')
    }
  }
}
</script>

[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://github.com/vuejs/core . 
  at <QTabs modelValue="mails" onUpdate:modelValue=fn > 
  at <TabsPage onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <QPageContainer> 
  at <QLayout view="hHh lpR fFf" > 
  at <App>

Error:  
  quasar.esm.prod.js:233 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'left')
    at Proxy.eval (quasar.esm.prod.js:233:143022)
    at renderComponentRoot (runtime-core.esm-bundler.js:969:38)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5354:46)
    at ReactiveEffect.run (reactivity.esm-bundler.js:238:19)
    at instance.update (runtime-core.esm-bundler.js:5467:16)
    at setupRenderEffect (runtime-core.esm-bundler.js:5477:5)
    at mountComponent (runtime-core.esm-bundler.js:5271:7)
    at processComponent (runtime-core.esm-bundler.js:5237:9)
    at patch (runtime-core.esm-bundler.js:4912:11)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5361:11)