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>