[Vuejs]-Update element's text when $emit function has been triggered

Fallowing suggestions, I stopped at this solution. Not the best, but kind of works.

So in Laravel blade I am generating link, here I can also do the roles/permission check:

<th>
    @can('edit role') <role-name-link :role="{{$role}}" /> @endcan
</th>

Inside <role-name-link />

<template>
    <a href="#" @click="open" @updateRoleName="updateName">{{name}}</a>
</template>

<script>
    export default {
        props: ['role'],
        name: "RoleNameLink",
        data() {
            return {
                name: this.role.name
            }
        },
        methods: {
            open(){
                Event.fire('openCrudRoleModal',this.role);
            },
            updateName(e){
                this.name = e.name;

            }
        },
        created() {
            Event.listen('updateRoleName', (role) =>{
                if(this.role.id == role.id) this.name = role.name;
            });
        }
    }
</script>

Once link is clicked on, it will open a modal with update form. After update is completed it will $emit (Event.fire()) another event to update link text.

onSubmit(){
    this.spinner = this.form.processing;
    this.form[this.action]('/admin/roles/')
        .then(response => {
            this.$toastr.s('Role '+this.actionName[this.action]);
            if(this.action == 'patch') Event.fire('updateRoleName',response);
            this.hide();
        });
}

Back inside <role-name-link />, I still need to compare id’s if(this.role.id == role.id) this.name = role.name;, else it will update all names in the table.

This will update the name in the php generated table. One gotcha there is, if I click the same link again, inside form it will show me the original name that was echoed by php.

Any thoughts, suggestions. How to make it better…. more elegant?