Getting ref in <script setup> throws an error about dataOptions
Vue version
3.2.21
Link to minimal reproduction
https://stackblitz.com/edit/troisjs-vue-bug?file=src%2Fcomponents%2FBug.vue
Steps to reproduce
- Create a template with renderless components, created with
defineComponent
- Add
ref="myRef"
to component in template - Add
myRef = ref(null)
in the
What is expected?
Get reference to component.
What is actually happening?
Get warnings and error:
- Invalid vnode type when creating vnode: null.
- The data option must be a function. Plain object usage is no longer supported.
- Unhandled error during execution of scheduler flush.
- dataOptions.call is not a function
System Info
System:
OS: macOS 12.1
CPU: (16) x64 Intel(R) Xeon(R) CPU E5-1680 v2 @ 3.00GHz
Memory: 60.60 MB / 24.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 16.13.0 - /usr/local/bin/node
Yarn: 1.22.17 - /usr/local/bin/yarn
npm: 8.1.0 - /usr/local/bin/npm
Browsers:
Chrome: 92.0.4515.131
Firefox: 102.0.1
Safari: 15.2
npmPackages:
vue: ^3.2.19 => 3.2.37
Any additional comments?
No response
Definitely has to do something with <renderer></renderer>
component because using an ordinary >div></div>
does not throw off errors
Also, in the browser elements, those components are not being rendered. #app should have child elements no?