У меня есть приложение VueJS, в котором у меня есть список пользователя и информация о пользователе.
Я использую макет из двух столбцов, поэтому на левой панели я загружаю список пользователей и, когда я нажимаю на любого пользователя, информацию о пользователебудет загружен на правую панель.
Я могу просматривать и редактировать информацию о пользователе с правой панели.Но обновленная информация не отображается на левой панели.Например, если я отредактирую имя и фамилию любого пользователя, его следует обновить на левой панели, но я не знаю, как мне это сделать в VueJS. 
index.vue
<template lang='pug'>
two-col-layout(v-loading='loading', :show-edit-view='isAddOrEdit', default-text='Select Employee')
template(slot='col-left-header')
el-input(
v-model='employeeSearchInput',
placeholder='Search Employee by Name or Email',
prefix-icon='el-icon-search',
).w-100.input-border-0
template(slot='col-left-body')
.fab.fab-rb
el-tooltip(content='Add Employee')
el-button(
v-if='addUserPerm',
type='success',
circle,
icon='el-icon-plus',
@click='$router.push("/employees/new")',
).btn-fab
template(slot='col-left-body-list')
router-link(
:key='employee.id',
v-for='employee in filteredItems',
:class='{ active: $route.params.employeeId === employee.id }',
:to='`/employees/${employee.id}/edit`',
).list-group-item.list-group-item-action.d-flex.border-0
.mr-11
employee-avatar(
v-if='employee.userPhoto',
:image='employee.userPhoto',
).size-42
employee-avatar(v-else, :email='employee.email').size-42
.flex-1.d-none.d-md-block
.fw-b {{ employee.firstName }} {{ employee.lastName }}
.fs-14 {{ employee.email }}
ul.list-unstyled.fs-14.mb-0
li(v-for='team in employee.teams' :key='team.id').d-flex.mb-1
.col-min-max.min-w-100.max-w-180
| • {{ team.team.groupName }}
.pl-3
el-tag(
size='mini', :type='getRoleTagColor(team.role.roleName)'
).el-tag-for-role.fs-12
| {{ team.role.roleName }}
</template>
Edit.vue
<template lang='pug'>
two-col-layout-edit(:loading-child='loadingChild', theme-color='#ffaeaf')
template(slot='header-pic')
employee-avatar(
v-if='employee.userPhoto',
@fileSelected='handleFileSelect($event)',
:image='employee.userPhoto',
show-uploader,
).size-100
employee-avatar(
v-else,
:email='employee.email',
@fileSelected='handleFileSelect($event)',
show-uploader
).size-100
template(slot='header-text') {{ employee.firstName }} {{ employee.lastName }}
template(slot='main-content')
el-form(
ref='editEmployee', :model='employee', label-position='top', :rules='rules',
@submit.prevent.native='validateEditEmpForm("editEmployee")'
)
h4.mb-4 Employee Information
.row
.col-md-6.col-xl-3
el-form-item(label='First Name', prop='firstName')
el-input(v-model='employee.firstName' :disabled="fncheckPerm()")
.col-md-6.col-xl-3
el-form-item(label='Last Name', prop='lastName')
el-input(v-model='employee.lastName' :disabled="fncheckPerm()")
.col-md-6.col-xl-3
el-form-item(label='Email', prop='email' )
el-input(v-model='employee.email' :disabled="fncheckPerm()")
.col-md-6.col-xl-3
el-form-item(label='Phone', prop='mobile' )
el-input(v-model='employee.mobile' :disabled="fncheckPerm()")
template(slot='footer-content')
.col-auto
el-button(type='danger', plain @click='removeUserConfirm()') Remove Employee
.col-auto.ml-auto
el-button(type='default' @click='cancelConfirm()') Cancel
el-button(type='success' @click="validateEditEmpForm('editEmployee')") Save
// things defined below will render in default slot
</template>