How to use the vform.Form function in vform

data: () => ({
    /* Always Declare Your Form Object */
    form: new Form({
      name: null,
      active: false,
      roles: [],
      password: null,
      password_confirmation: null,
      email: null,
      contact_no: null,
      address_1: null,
      address_2: null,
      city: null,
      state: null,
      zip: null,
      country: null
    }),
    roles: [],
    password_visible: false

data: () => ({
    /* Always Declare Your Form Object */
    form: new Form({
      username: null,
      active: false,
      roles: [],
      password: null,
      password_confirmation: null,
      company_name: null,
      first_name: null,
      last_name: null,
      email: null,
      phone: null,
      address_1: null,
      address_2: null,
      city: null,
      state_province: null,
      zip: null,
      country: null

async massActivate() {
      let self = this;
      let selected = _.map(self.selected, "id");
      let toggleStatusForm = new Form({
        selected
      });

      try {
        const payload = await axios.post(
          route("api.user.massActivate"),
          toggleStatusForm
        );
        let updated = payload.data.updated;
        console.log(updated);
        _.map(updated, id => {
          let index = _.findIndex(self.items, { id });
          self.items[index].active = true;
        });
        let toggleModal = swal.mixin({
          confirmButtonClass: "v-btn blue-grey  subheading white--text",

async changeRoles(item) {
      let self = this;
      let toggleModal = swal.mixin({
        confirmButtonClass: "v-btn blue-grey  subheading white--text",
        buttonsStyling: false
      });
      self.rolesForm.roles = item.roles;
      try {
        self.rolesForm.busy = true;
        const payload = await self.rolesForm.post(
          route("api.user.roles.sync", { id: item.id })
        );
        item.permissions = payload.data.permissions;
        self.rolesForm.busy = false;
        self.rolesForm = new Form({
          roles: []
        });
        toggleModal.fire({
          title: "Success",
          html: `<p class="title">User Role Change!</p>`,
          type: "success",
          confirmButtonText: "Back"
        });
      } catch (errors) {
        toggleModal.fire({
          title: "Error!",
          html: `<p class="title">${errors.response.data.message}</p>`,
          type: "error",
          confirmButtonText: "Back"
        });
        self.rolesForm.busy = false;

resetForm() {
      let self = this;
      self.form = new Form({
        username: null,
        active: false,
        roles: [],
        password: null,
        password_confirmation: null,
        company_name: null,
        first_name: null,
        last_name: null,
        email: null,
        phone: null,
        address_1: null,
        address_2: null,
        city: null,
        state: null,
        zip: null,
        country: null,

data: () => ({
    form: new Form({
      name: "",
      email: "",
      username: "",
      old_password: "",
      password: "",
      password_confirmation: ""
    }),
    password_visible: false
  }),
  computed: {

data: () => ({
    form: new Form({
      username: ""
    })
  }),
  computed: {

rowsPerPage: 50,
      page: 1
    },
    rows_per_page_items: [5, 10, 25, 50],
    current_user: {},
    usersForm: new Form({}),
    toggleForm: new Form({
      user_id: null
    }),
    search: "",
    roles: [],
    permissions: [],
    rolesForm: new Form({
      roles: []
    }),
    permissionsForm: new Form({
      permissions: []
    }),
    deleteUserForm: new Form({
      user_id: null
    }),
    domain: window.location.hostname,
    dropdown_font: [
      { text: "Arial" },
      { text: "Calibri" },
      { text: "Courier" },
      { text: "Verdana" }
    ],
    dropdown_edit: [{ text: "Name" }, { text: "Roles" }, { text: "Status" }],
    meta: {
      current_page: 1,
      last_page: 1,

data: () => ({
    form: new Form({
      username: "",
      name: "",
      email: "",
      password: "",
      password_confirmation: "",
      role: "",
      sponsor_id: ""
    }),
    password_visible: false
  }),
  computed: {

pagination: {
      descending: false,
      sortBy: "name",
      rowsPerPage: 50,
      page: 1
    },
    rows_per_page_items: [5, 10, 25, 50],
    current_user: {},
    usersForm: new Form({}),
    toggleForm: new Form({
      user_id: null
    }),
    search: "",
    roles: [],
    permissions: [],
    rolesForm: new Form({
      roles: []
    }),
    permissionsForm: new Form({
      permissions: []
    }),
    deleteUserForm: new Form({
      user_id: null
    }),
    domain: window.location.hostname,
    dropdown_font: [
      { text: "Arial" },
      { text: "Calibri" },
      { text: "Courier" },
      { text: "Verdana" }
    ],
    dropdown_edit: [{ text: "Name" }, { text: "Roles" }, { text: "Status" }],