VUE 3 Vuelidate - conflicts between components validation

Question

I have problem with VUE 3 Vuelidate. I have 2 components (list with CRUD functionality made with modals). Each component has validation using Vuelidate. If I go go to first list, open modal (where inputs with validations are), then route to second list and open modal I got errors like:

Uncaught TypeError: Cannot convert undefined or null to object
at Function.keys (<anonymous>)
at sortValidations (index.esm.js:88)
at setValidations (index.esm.js:494)
at index.esm.js:694
at ComputedRefImpl.reactiveEffect [as effect] (reactivity.esm-bundler.js:42)
at ComputedRefImpl.get value [as value] (reactivity.esm-bundler.js:819)
at Proxy.options.computed.$v (index.esm.js:700)
at ComputedRefImpl.reactiveEffect [as effect] (reactivity.esm-bundler.js:42)
at ComputedRefImpl.get value [as value] (reactivity.esm-bundler.js:819)
at Object.get [as $v] (runtime-core.esm-bundler.js:5611)

My 2 components look like the simplest Vuelidate example with structure like that:

<script>
export default {
data(){ },
validations() { }
}
</script>

When I put breakpoint at setValidations() I saw validation model was empty. It seems like validation on my second component isn't newly created but taken from previous one. Is it possible? Thanks in adavance.

EDIT: I saw there is "VuelidateMixin" option which "apply all the Vuelidate functionality to dedicated components via a mixin". But it doesnt work in my scenario.

Answer 1

Seems like syntax error.

<script>
export default {
  data() {
    return {
      ...
    }
  },
  validations: {
    ...
  }
}
</script>