Vue 2.7 SFC <script setup> component's template is not rendered properly

[iraklisg]

Version

2.7.6

Reproduction link

stackblitz.com

Steps to reproduce

Start the stackblitz app, and verify that the <form> element is not rendered

What is expected?

The component to be rendered properly

What is actually happening?

The <form> element within HelloWorld.vue component's template is not rendered and the following warn is shown in browser console:

[Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <Anonymous>
       <HelloWorld> at /home/projects/node-lwlnmc/src/components/HelloWorld.vue
         <Root>

---

This happens when we use a reactive property within <script setup> with the same name as an HTML element that exists within <template> In this case we use form reactive property and a <form> element. The same would happen if we had named our reactive property, for instance, div

// HelloWorld.vue

<script setup lang="ts">
import { reactive } from 'vue'

const form = reactive({
  foo: 'bar',
})
</script>

<template>
  <div>
    <form> <!-- This is not rendered --> 
      <input v-model="form.foo" />
    </form>
  </div>
</template>

If we change the name of the form reactive property to something else (e.g myForm) the <form> will be rendered as expected.

// HelloWorld.vue

<script setup lang="ts">
import { reactive } from 'vue'

const myForm = reactive({
  foo: 'bar',
})
</script>

<template>
  <div>
    <form>   <!-- This will be rendered as expected --> 
      <input v-model="myForm.foo" />
    </form>
  </div>
</template>

[zhaoyls]

冲突了这是。

[dylanzbot]

冲突了这是。

请教一下这个是哪里冲突了？我项目现在是 2.7.16，使用 scirpt setup 就报错，不使用 script setup 转而使用 export default 中的 setup() 就不会报错。我找了好久的原因，目前只知道是在 vue 源码里 initSetup() 函数中，判断 setupResult.__sfc 变量，如果是用 scirpt setup 写法的话，这个变量就是 true，就将 setupResult 中的结果挂载到 vm._setupProxy 中；如果是用 export default 中的 setup() 写法，就将 setupResult 中的结果挂载到 vm 中，就是 this 上。因为变量都挂载到 this 上，template 模板里访问得到，就没报错；用 scirpt setup 写法的话，没有挂载到 this 上就报错了。