Description
Vue version
3.3.4
Link to minimal reproduction
https://stackblitz.com/edit/vitejs-vite-rsn38e?file=index.html
Steps to reproduce
I am using vite in combination with laravel and so my HTML is partly generated by php, hence I am using in-dom-templates for the vue instance. For the logic I would like to use the composition API with script setup. However when setting this up, the variables and functions are not scoped correctly/not working properly. Strangely tho, the mounted hook of the component gets executed.
I recreated the issue inside stackblitz for you to have a look on.
https://stackblitz.com/edit/vitejs-vite-uetc6h?file=index.html -> composition API standard export works
https://stackblitz.com/edit/vitejs-vite-rsn38e?file=index.html -> composition API script setup does not work
What is expected?
I expect the in-dom template to be correctly rendered and responsive, when using script setup composition API. Or at least a console note that script setup is incompatible with in-dom templates.
What is actually happening?
Reactivity is not working. Furthermore, when using npm run build to get a production build, the app will be rendered as a blank page (mounted/lifecycle hooks will be called) - replacing the in-dom template completely (in development mode it works fine tho). I have created a stackblitz example for this aswell.
And lastly, what also is unfortunate, that neither with development nor production build the console does not even give a warning. (because the code runs flawless I assume - note: mounted hook is executed, but dom-template is either replaced or not reactive)
System Info
System:
OS: Linux 5.0 undefined
CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 0 Bytes / 0 Bytes
Shell: 1.0 - /bin/jsh
Binaries:
Node: 16.14.2 - /usr/local/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 7.17.0 - /usr/local/bin/npm
npmPackages:
vue: ^3.3.4 => 3.3.4
Any additional comments?
I initially though this might be an issue of the bundler (vite) and created already an issue there. However, this problem persists also with laravel-mix, hence I assume the problem is more generic and could be inside vue itself, hence I am "reposting" it here.