A v-form nested inside another v-form is a production silent bomb.

[ibrahimBeladi]

Module version 1.12.3 I first saw it in 1.12.1, and I could reproduce the issue in 1.12.3.

Describe the bug When there is a v-form inside a v-form, some issues are in the built project (prod env). The issue is not occurring on development, and there are no logs of any kind to inform the developer.

To Reproduce

<template>
  <v-form v-model="f1">
    <v-row>
      <v-col>
        <!--
          TypeError: n.setAttribute is not a function
          DOMException: Node.appendChild: Cannot add children to a Text
        -->
        <v-form v-model="f2">
          <v-btn class="green">f2: {{ f2 }}</v-btn>
        </v-form>

        <!--
          TypeError: t is undefined
          DOMException: Node.appendChild: Cannot add children to a Text
        -->

        <!-- <v-form v-model="f3">
          <v-text-field :label="'f3:' + f3"></v-text-field>
        </v-form> -->
      </v-col>
    </v-row>
  </v-form>
</template>

<script>
export default {
  data() {
    return {
      f1: false,
      f2: false,
      f3: false,
      m: null,
    }
  }
}
</script>

Steps to reproduce the behavior:

1. Create a new nuxt/vuetify project
2. Add the above snippet into index page
3. npm run build
4. npm run start
5. You can see the issue in the browser The other section provides a different error/issue that might be related.

Expected behavior It should be either fixed or at least a warning/error should be visible to the user in development mode, and better readable error logs in prod.

Additional context I first encountered the issue in an update to a deployed project with 1000+ users, due to lack of readable logs I spent almost 3 hours to find out why and where this occurred. It was a stressful Comment-out tag -> build (locally) -> start -> check -> rinse and repeat cycle until I cornered that there are some weirdness is happening when a v-form is nested inside a v-form.