How to pass an element on click to another component?

Question

Vue.js

Hello!
I can’t figure out such a task, there is a CRUD application where departments are displayed, and employees from these departments are displayed in them.
Components are organized like this: App.vue is the main component, the component with the output of departments is connected in it with the output of employees, DepartamentWorker.vue
Each department and employee has a delete button, I need to make it so that when you click on it, a modal window will appear with a question, do you really want to delete this section / employee?
That is, when you click on a department, pass this element and id to the modal window component, display information there, and when you click on "Delete" inside the modal window, somehow execute a function in another component, and pass the id of this element to it, and delete already there.
Here is my component with departments:

<div v-else v-for="departament in departaments" :key="departament.id">
            <div class="row departament align-items-center p-2 mt-3">
                <input type="text"
                       class="form-control col-lg-6"
                       placeholder="Название отдела"
                       v-model="departament.departament_name"
                       @keyup.enter="departament.edit = false; editDepartament(departament)"
                       v-if="departament.edit"
                       v-focus
                >
                <div class="departament-head col-lg-6" v-else>
                    {{ departament.departament_name }}
                </div>
                <div class="departament-head_btn col-lg-6 text-right">
                    <button @click="departament.edit = true" type="button" class="btn btn-primary">
                        <i class="fa fa-pencil"></i>
                    </button>
                    <button @click="deleteDepartament(departament.id)" type="button" class="btn btn-danger">
                        <i class="fa fa-trash-o"></i>
                    </button>
                </div>
                <departament-worker
                    @render="renderComponentMethod"
                    v-if="renderComponent"
                    :departamentId="departament.id"
                    :renderComponent="renderComponent"
                >
                </departament-worker>
                <div class="input-group mt-3">
                    <input @keyup.enter="saveWorker(departament.id)"
                            type="text"
                            class="form-control"
                            v-model="worker.worker_name[departament.id]"
                            :key="departament.id"
                            placeholder="Имя сотрудника"
                    >
                    <div class="input-group-append">
                        <button @click="saveWorker(departament.id)" class="btn btn-outline-secondary btn-primary text-light" type="button">Сохранить</button>
                    </div>
                </div>
            </div>
        </div>

methods: {
            deleteDepartament(id) {
                axios.delete(`/api/departaments/${id}`)
                    .then(response => {
                        this.getDepartaments()
                    })
                    .catch(error =>{
                        console.log(error)
                    })
                    .finally(() => this.loading = false)
            }
}

How can this be done, and is the structure of the components correctly built?

Answer 1

You need to nest a modal window component in each component that displays a section / employee. The task will be greatly simplified.