Vue 3 with vuelidate@next. Needs a way to reset $v while loading another view.

I am using vue-router, and have some auth forms like below:

  {
    path: "/auth",
    children: [
      {
        path: "login",
        component: () => import("@/views/auth/Login.vue")
      },
      {
        path: "register",
        component: () => import("@/views/auth/Register.vue")
      }
    ]
  }

I am adding $v to main.ts like below:

import { VuelidatePlugin, Validation } from "@vuelidate/core";

declare module "@vue/runtime-core" {
  interface ComponentCustomProperties {
    $v: Validation;
  }
}

createApp(App)
  .use(router)
  .use(VuelidatePlugin)
  .mount("#app");

I am using vuelidate and dumped {{ $v }} in both Login.vue and Register.vue.

The issue is, if I navigate to register page first and then to login page, the {{ $v }} instance will bring some validation data from the register page to login page. For example, we have a name field which exists in register page only, but I can dump its data in {{ $v }} in the login page.

I understand $v is registered as a global instance, but should we provide a way for us to programmatically cleanup $v while navigate to different page via vue-router?

[emersoncpaz]

I’m having a similar problem. On first page load vuelidade works fine on login page. But after logout when login page is loaded again seens like model is diconnected from $v object and the validation doesn’t work any more.

codesandbox to test: https://codesandbox.io/s/wzibe

1. Click button -=> Go to login page
2. Write a name and click login button
3. Click again => Go to login page
4. Write again a name, you will see the model disconnect from $v

[shentao]

This should be fixed with #790