Laravel + Vue V-IF updating in the database but not in the view

Question

I have a project when I'm using Laravel 7.3 + Vue.

I am trying to assign a company to an internal employee. When I click the "Assign Company" button everything is fine and I can select the company in a select box, but when I click the "Save Company" button now, I can see the change in my database, but I don not see the changes live in my view/template, I need to refresh the webpage to see the assigned company.

This is my File.vue between the <template>:

 <td><h4 v-if="editEmpleado" class="text-black-50">{{EmpleadosInterno.empresa}}</h4>
    <select v-else class="form-control" id="Cliente" v-model="ClienteSeleccionado">
    <option v-for="Cliente in Clientes"
    :key="Cliente.id"
    :value="Cliente">{{Cliente.nombreempresa}}</option>
    </select>
    </td>
    <td>
    <a v-if="editEmpleado" type="button" class="btn btn-primary" v-on:click="onClickEdit()">
    Assign Company
    </a>
    <button v-else type="button" class="btn btn-success" v-on:click="onClickUpdate()">
    Save Company
</button>
</td>

And this is my script

export default {
    props: ['EmpleadosInterno'],
    data() {
        return {
            ClienteSeleccionado: {},
            Clientes: [],
            csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            editEmpleado: true
        }
    },
    mounted() {
        axios.get('/Clientes').then((response) => {
                this.Clientes = response.data;
            },
        );
    },
    methods: {
        onClickEdit() {
            this.editEmpleado = false;
        },
        onClickUpdate() {
            const params = {
                nombreempresa: this.ClienteSeleccionado.nombreempresa
            }
            axios.put(`/EmpleadosInternos/${this.EmpleadosInterno.id}`, params).then((response) => {
                const EmpleadosInterno = response.data;
                this.$emit('update', EmpleadosInterno);
                this.editEmpleado = true;
            });
        },
        

This is my services.vue

 <div class="container">
        <div class="row justify-content-center text-center">
            <div class="col-md-12">
                <h2 class="text-primary">Empleados Registrados:</h2>
                <table class="table table-bordred table-striped ">
                    <thead>
                    <tr>
                        <th>Nombre</th>
                        <th>Telefono</th>
                        <th>Empresa</th>
                        <th>Acción</th>
                    </tr>
                    </thead>
                    <tbody>
                <empleadocomponente-component
                    v-for="(EmpleadosInterno, index) in EmpleadosInternos"
                    :key="EmpleadosInterno.id"
                    :EmpleadosInterno="EmpleadosInterno"
                    @update="updateEmpleadosInterno(index, ...arguments)"
                    @delete="deleteEmpleadosInterno(index)">
                </empleadocomponente-component>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
<script>
export default {
    data(){
        return {
            EmpleadosInternos: [],
        }
    },
    mounted() {
        axios.get('/EmpleadosInternos').then((response) => {
                this.EmpleadosInternos = response.data;
            },
        );
    },
    methods: {
        updateEmpleadosInterno(index, EmpleadosInterno){
            this.EmpleadosInternos[index] = EmpleadosInterno;
        },
        deleteEmpleadosInterno(index){
            this.EmpleadosInternos.splice(index, 1);
        }

    }
}
</script>