VueJS + Two instances of vForm in one component - vue.js

Question

I'm using laravel + VueJS for front-end. I have a groups component to handle groups creation and groups permissions. I need to use two vForms: One to create groups, and the other to create / assign permissions for the group.
The problem is when I send the permissions form, laravel receives data of the first form, this i suppose is because I create that instance first. I think I should create two instances of vForm, but I do not know how. Is this possible?
My component code:
<template>
<div class="container">
<div class="row mt-5">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">Grupos</h3>
<div class="card-tools">
<button class="btn btn-success" #click="newGroupModal" v-if="$can('groupscreate')"> <i class="fas fa-user-plus fa-fw"></i> Nuevo Grupo </button>
</div>
</div>
<!-- /.card-header -->
<div class="card-body table-responsive p-0">
<table class="table table-hover">
<tbody>
<tr>
<th>ID</th>
<th>Nombre</th>
<th>Fecha Alta</th>
<th>Fecha Act</th>
<th>Acc.</th>
</tr>
<tr v-for="group in groups" :key="groups.id">
<td>{{ group.id }}</td>
<td>{{ group.name }}</td>
<td>{{ group.created_at | formattedDate }}</td>
<td>{{ group.updated_at | formattedDate }}</td>
<td><i class="fas fa-edit"></i></td>
<td><i class="fas fa-key"></i></td>
</tr>
</tbody>
</table>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="groupModal" tabindex="-1" role="dialog" aria-labelledby="groupModal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="groupModal">Nuevo Grupo</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form #submit.prevent="editMode ? updateGroup() : createGroup()">
<div class="modal-body">
<div class="form-group">
<input v-model="form.name" type="text" name="name" placeholder="Name"
class="form-control" :class="{ 'is-invalid': form.errors.has('name') }">
<has-error :form="form" field="name"></has-error>
</div>
</div>
<div class="modal-footer">
<button v-show="editMode" type="button" class="btn btn-danger" #click="deleteGroup" v-if="$can('groupsdelete')">Eliminar</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
<button type="submit" class="btn btn-primary" v-if="$can('groupsedit')">Guardar</button>
</div>
</form>
</div>
</div>
</div>
<!-- Modal Permissions-->
<div class="modal fade" id="groupPermissionsModal" tabindex="-1" role="dialog" aria-labelledby="groupPermissionsModal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="userModal">Permisos por Grupo</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form #submit.prevent="updateGroupPermissions()">
<div class="modal-body">
<div class="form-group">
<label class="control-label">Usuarios</label><br>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="usersview" value="usersview" v-model="groupPermissions">
<label class="form-check-label" for="usersview">Ver</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="userscreate" value="userscreate" v-model="groupPermissions">
<label class="form-check-label" for="userscreate">Crear</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="usersedit" value="usersedit" v-model="groupPermissions">
<label class="form-check-label" for="usersedit">Editar</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="usersdelete" value="usersdelete" v-model="groupPermissions">
<label class="form-check-label" for="usersdelete">Eliminar</label>
</div>
</div>
<div class="form-group">
<label class="control-label">Grupos</label><br>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="groupsview" value="groupsview" v-model="groupPermissions">
<label class="form-check-label" for="groupsview">Ver</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="groupscreate" value="groupscreate" v-model="groupPermissions">
<label class="form-check-label" for="groupscreate">Crear</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="groupsedit" value="groupsedit" v-model="groupPermissions">
<label class="form-check-label" for="groupsedit">Editar</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="groupsdelete" value="groupsdelete" v-model="groupPermissions">
<label class="form-check-label" for="groupsdelete">Eliminar</label>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
<button type="submit" class="btn btn-primary" v-if="$can('permissionsedit')">Guardar</button>
</div>
</form>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
editMode: false,
groups: {},
groupPermissions: {},
form: new Form({
id: '',
name : '',
}),
formPermissions: new Form({
users: [],
groups: []
}),
}
},
methods: {
newGroupModal(){
this.editMode = false;
this.form.reset();
$('#groupModal').modal('show');
},
newGroupPermissionsModal(groupId){
this.loadGroupPermissions(groupId);
this.form.reset();
$('#groupPermissionsModal').modal('show');
this.form.fill(this.groupPermissions);
},
newEditGroupModal(group){
this.editMode = true;
this.form.reset();
$('#groupModal').modal('show');
this.form.fill(group);
},
loadGroups(){
this.$Progress.start();
axios.get('api/group').then(({data}) => (this.groups = data.data));
this.$Progress.finish();
},
loadGroupPermissions(groupId){
this.$Progress.start();
axios.get('api/permissions/group/' + groupId).then(({data}) => (this.groupPermissions = data));
this.$Progress.finish();
},
createGroup(){
this.$Progress.start();
this.form.post('api/group')
.then(() => {
Fire.$emit('GroupInform');
$('#groupModal').modal('hide');
Toast.fire({
type: 'success',
title: 'Usuario creado satisfactoriamente.'
})
this.form.reset();
this.$Progress.finish();
})
.catch(() => {
this.$Progress.fail();
})
},
updateGroup(groupId){
this.$Progress.start();
this.form.put('api/group/' + this.form.id)
.then(() => {
Fire.$emit('GroupInform');
$('#groupModal').modal('hide');
Toast.fire({
type: 'success',
title: 'Usuario actualizado satisfactoriamente.'
})
this.form.reset();
this.$Progress.finish();
})
.catch(() => {
this.$Progress.fail();
})
},
deleteGroup(){
Swal.fire({
title: 'Estas seguro?',
text: "No podrás restaurar los datos eliminados.",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#d33',
cancelButtonColor: '#14b750',
confirmButtonText: 'Si'
}).then((result) => {
if (result.value) {
this.form.delete('api/group/'+this.form.id).then(()=>{
Toast.fire({
type: 'success',
title: 'Usuario eliminado satisfactoriamente.'
})
Fire.$emit('GroupInform');
$('#groupModal').modal('hide');
}).catch(()=> {
Swal.fire("Error!", "Algo anda mal.", "warning");
this.$Progress.fail();
});
}
})
},
updateGroupPermissions(){
this.$Progress.start();
this.form.post('api/permissions/group/1')
.then(() => {
Fire.$emit('GroupInform');
$('#groupModal').modal('hide');
Toast.fire({
type: 'success',
title: 'Usuario actualizado satisfactoriamente.'
})
this.form.reset();
this.$Progress.finish();
})
.catch(() => {
this.$Progress.fail();
})
}
},
mounted() {
this.loadGroups();
Fire.$on('GroupInform', () => {
this.loadGroups();
});
}
}
</script>

Answer 1

Simply add a new variable with a different name than 'form' as a new instance from v-form
form2: new Form({
id: '',
name : '',
})
then access it like that:
<div class="form-group">
<input v-model="form2.name" type="text" name="name" placeholder="Name" class="form-control" :class="{ 'is-invalid': form.errors.has('name') }">
<has-error :form="form2" field="name"></has-error>
</div>