[Vue] Scoping issue with script setup and in-dom templates #176
Description
Describe the bug
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
Furthermore and maybe related to this:
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). - for this I was not able to provide an example, but I tried with a fresh laravel 10 installation and got the same result. you can find an example here. I am not sure if this isn't even a bug with vue itself as I experience the same behavior with laravel mix (also fresh installation).
Unfortunately the console does not even give a warning.
Reproduction
Steps to reproduce
run npm i and npm run dev
System Info
System:
OS: Linux 5.15 Linux Mint 21.1 (Vera)
CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
Memory: 2.44 GB / 15.30 GB
Container: Yes
Shell: 5.8.1 - /usr/bin/zsh
Binaries:
Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
npm: 9.6.1 - ~/.nvm/versions/node/v16.14.2/bin/npm
Browsers:
Chrome: 111.0.5563.64
Firefox: 113.0
npmPackages:
@vitejs/plugin-vue: ^4.2.3 => 4.2.3
vite: ^4.3.5 => 4.3.5
### Used Package Manager
npm
### Logs
_No response_
### Validations
- [X] Follow our [Code of Conduct](https://github.com/vitejs/vite/blob/main/CODE_OF_CONDUCT.md)
- [X] Read the [Contributing Guidelines](https://github.com/vitejs/vite/blob/main/CONTRIBUTING.md).
- [X] Read the [docs](https://vitejs.dev/guide).
- [X] Check that there isn't [already an issue](https://github.com/vitejs/vite/issues) that reports the same bug to avoid creating a duplicate.
- [X] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to [vuejs/core](https://github.com/vuejs/core) instead.
- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/vitejs/vite/discussions) or join our [Discord Chat Server](https://chat.vitejs.dev/).
- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.