logdog90

Прошу прощения не дописал ещё компонент модального окна!

modal.vue

<template>
    <transition name="fade">
        <div class="fixed top-0 left-0 w-full h-full z-10 flex justify-center items-center transition duration-300 ease-out"
            v-if="SHOW_UPDATE_MODAL"
        >
            <div 
                class="fixed top-0 left-0 w-full h-full bg-bgOverLey"
                @click="SET_HIDE_UPDATE_MODAL"
            >
            </div>
            <div class="z-20 px-3 py-14 w-1/3 bg-white shadow-shadowForm relative rounded-lg model-content">
                <button 
                    class="absolute top-1 right-1 focus:outline-0"
                    @click="SET_HIDE_UPDATE_MODAL"
                >
                    <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30"
                        class="bi bi-x fill-grey hover:fill-closeColor transition duration-1000 ease-out"
                        viewBox="0 0 16 16">
                        <path
                            d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
                    </svg>
                </button>
                <form class="modal-form" @submit.prevent="updateEmployee(employee)">
                    <div class="py-2">
                        <input 
                            type="text" 
                            placeholder="Фамилия" 
                            class="focus:outline-0 border-1 p-2 my-1 mx-1 w-44 rounded-lg"
                            v-model="lastname"
                        >
                        <input 
                            type="text" 
                            placeholder="Имя" 
                            class="focus:outline-0 border-1 p-2 my-1 mx-1 w-44 rounded-lg"
                            v-model="firstname"
                        >
                        <input 
                            type="number" 
                            placeholder="Внутрнний" 
                            class="focus:outline-0 border-1 p-2 my-1 mx-1 w-44 rounded-lg"
                            v-model="number"
                        >
                    </div>
                    <button 
                        class="focus:outline-0 bg-lightGreen text-white py-2 px-3 hover:bg-darkGreen transition duration-500 ease-out"
                    >Изменить</button>
                </form>
            </div>
        </div>
    </transition>
</template>

<script>
import { mapActions, mapGetters, mapMutations } from 'vuex'

export default {
    name: 'EmployeeModalUpdate',

    methods: {
        ...mapMutations(['SET_HIDE_UPDATE_MODAL', 'SET_ID', 'SET_LASTNAME', 'SET_FIRSTNAME', 'SET_NUMBER', 'SET_EMPLOYEES']),
        ...mapActions(['updateEmployee']),

        // Редактировать

    },

    computed: {
        ...mapGetters(['SHOW_UPDATE_MODAL']),


        employee() {
            return this.$store.state.employee
        },

        id: {
            get() {
                return this.$store.getters.GET_ID
            },
            set(employee) {
                return this.SET_ID(employee)
            }
        },

        lastname: {
            get() {
                return this.$store.getters.GET_LASTNAME
            },
            set(employee) {
                return this.SET_LASTNAME(employee)
            }
        },

        firstname: {
            get() {
                return this.$store.getters.GET_FIRSTNAME
            },
            set(employee) {
                return this.SET_FIRSTNAME(employee)
            }
        },

        number: {
            get() {
                return this.$store.getters.GET_NUMBER
            },
            set(employee) {
                return this.SET_NUMBER(employee)
            }
        },

    },
}
</script>

<style lang="sass">
.fade-enter-active
    opacity: 0

.fade-leave-active
    opacity: 0
</style>

Проблема решена. В файле store.js, в аргументе нужно было передать id

store.js

actions: {
    async updateEmployee({ commit }, id, employee) {
        const response = await axios.put(`http://127.0.0.1:8000/api/v1/employees/${id}/`, employee )
        commit('SET_EMPLOYEES', response.data)
    }
}

А также в компоненте form.vue, когда submit-им форму, тоже передаём этот аргумент

form.vue

<form class="modal-form" @submit.prevent="updateEmployee(id, employee)">
        <div class="py-2">
            <input type="text" placeholder="Фамилия" class="focus:outline-0 border-1 p-2 my-1 mx-1 w-44 rounded-lg"
                v-model="lastname">
            <input type="text" placeholder="Имя" class="focus:outline-0 border-1 p-2 my-1 mx-1 w-44 rounded-lg"
                v-model="firstname">
            <input type="number" placeholder="Внутрнний" class="focus:outline-0 border-1 p-2 my-1 mx-1 w-44 rounded-lg"
                v-model="number">
        </div>
        <button
            class="focus:outline-0 bg-lightGreen text-white py-2 px-3 hover:bg-darkGreen transition duration-500 ease-out">Изменить</button>
    </form>