Getting ref in <script setup> throws an error about dataOptions

[benoitlahoz]

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 <script setup>

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

[EmmyMay]

Definitely has to do something with <renderer></renderer> component because using an ordinary >div></div> does not throw off errors

[EmmyMay]

Also, in the browser elements, those components are not being rendered. #app should have child elements no?

[LinusBorg]

Please open an issue with troisJS or provide a repo not using this 3rd party libary.

[benoitlahoz]

Thank you. Just to be complete: the error disappears when I define my component with defineComponent.