useForm is broken for build

[asvae]

Vuestic-ui version: 1.8.3

I created a fresh project with vite and added vuestic-ui to it.

here are my files:

main.ts:

import { createApp } from 'vue'
import App from './App.vue'
import {createVuestic} from "vuestic-ui";
import "vuestic-ui/css";

const app = createApp(App)
app.use(createVuestic())
app.mount('#app')

App.vue:

<template>
  <va-form ref="form" @submit.prevent="submit">
    <va-input
        stateful
        :rules="[(v) => !!v || 'Email field is required']"
    />
    <br>
    <va-button class="w-full mb-2" @click="submit">Send password</va-button>
  </va-form>
</template>

<script setup lang="ts">
import {useForm} from 'vuestic-ui'

const form = useForm('form')

const submit = () => {
  form.validate()
}
</script>

I click on button and observe results.

• When I do yarn dev - I see validation error and things are fine.

  

• When I do yarn build && yarn preview - error doesn't appear and I have this error in console:
  
  
  Error seem to be coming from useForm.

[m0ksem]

It is because the name of ref shouldn't be the same as name of setup variable.

Here is a correct usage:

const form = useForm('formRef')

or

const formRef = ref()
const form = useForm(formRef)

[asvae]

@m0ksem I think we have to add a point in docs regarding that or have a check for that. Nothing in error tells about name clash (it's also not present in dev server, which makes it even more confusing).