Options API erro after updating to "@quasar/app-vite": "^3.0.0"

[kevinmelo]

What happened?

I create a new project with following command: npm init quasar@latest
Everything looks greate, then i edit the index.vue file to use Option API no the composition, it's giving me the following erro:

TypeError: Cannot add property leftDrawerOpen, object is not extensible
    at _createVNode.onUpdate:modelValue._cache.<computed>._cache.<computed> (index.vue:13:38)
    at callWithErrorHandling (vue.runtime.esm-bundler-DYqNBX5Z.js?v=a383c820:1901:17)
    at callWithAsyncErrorHandling (vue.runtime.esm-bundler-DYqNBX5Z.js?v=a383c820:1908:15)
    at emit (vue.runtime.esm-bundler-DYqNBX5Z.js?v=a383c820:4696:15)
    at hide (quasar_dist_quasar__client__js.js?v=a383c820:2715:4)
    at quasar_dist_quasar__client__js.js?v=a383c820:9959:24
    at callWithErrorHandling (vue.runtime.esm-bundler-DYqNBX5Z.js?v=a383c820:1901:17)
    at callWithAsyncErrorHandling (vue.runtime.esm-bundler-DYqNBX5Z.js?v=a383c820:1908:15)
    at baseWatchOptions.call (vue.runtime.esm-bundler-DYqNBX5Z.js?v=a383c820:2400:46)
    at job (vue.runtime.esm-bundler-DYqNBX5Z.js?v=a383c820:1682:13)

What did you expect to happen?

Expect to not break when using Option API

Reproduction URL

don't have

How to reproduce?

1. Create a new quasar projetc with only js + pinia + eslint (SPA mode)
2. Edit the file index.vue from pages to Options API
3. See the error

Flavour

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

Areas

SPA Mode

Platforms/Browsers

Chrome

Quasar info output

Relevant log output

Additional context

No response

[github-actions]

Hi @kevinmelo! 👋

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. 👏

[BartSchuurmans]

https://quasar.dev/quasar-cli-vite/upgrade-guide#notable-breaking-changes

/quasar.config > build > vueOptionsAPI is now false by default. Check other Vue 3 packages and components. If they use the Options API, you will need to set this to true.

[rstoenescu]

Options API is now disabled by default. It's in the docs.
Should you want to use, you need to enable it:

build: {
  vueOptionsAPI: true
}