Why is the last added post not deleted?

Question

Vue.js

I am making todo app vue.js vuex. Implemented adding and deleting posts. The problem is that the last added post is not deleted from the first time (it is deleted only from the second attempt). I get DELETE localhost:8000/api/todo/undefined/ in the console, but if I click on the "delete" link a second time, it is deleted. Generally the last post comes without "id".
Noticed one more nuance. If you add three posts and start deleting not from the last added post, but for example from the first added, then the second and finally the last post, then everything goes without errors.
It seems to me that my mutation is not honest.
my store

import axios from 'axios'

const state = {
    name: [],
}

const actions = {
    GET_TODO: ({commit}) => {
        axios.get('/api/todo/')
        .then(response => {
            commit('GET_TODO', response.data)
        })
        .catch(error => {
            console.log(error)
        })
    },
    ADD_TODO: ({commit}, data)  => {
        axios.post('/api/todo/', data)
        .then(response => {
            commit('ADD_TODO', data)
            //commit('GET_TODO')
        })
        .catch(error => {
            console.log(error)
        })
    },
    DELETE_ONE_TODO: ({commit}, data) => {
        axios.delete('/api/todo/' + data + '/')
        .then(response => {
            commit('DELETE_ONE_TODO', data)
        })
    }
}

const mutations = {
    DELETE_ONE_TODO: (state, data) => {
        state.name = state.name.filter(name => name.id != data)  
    },
    GET_TODO: (state, name) => {
        state.name = name
    },
    ADD_TODO: (state, data) => {
        state.name.push(data)
        console.log(state.name)
    }
}

const getters = {
    name: state => state.name
}

export default {
    state,
    actions,
    mutations,
    getters
}

my home.vue

<script>
import axios from 'axios'
import { mapGetters } from 'vuex'
export default {
    name: 'Home',
    data() {
        return {
            new_todo: '',
            complete: false
        }
    },
    computed: mapGetters ({
        name: 'name'
    }),
    methods: {
        delete_one_todo(id) {
            this.$store.dispatch('DELETE_ONE_TODO', id)
            this.$store.dispatch('GET_TODO')
        },
        add_todo() {
            this.$store.dispatch('ADD_TODO', {
                'name': this.new_todo,
                'user': this.profile.pk,
                'complete': this.complete 
                }
            )
            this.new_todo = ''
            this.$store.dispatch('GET_TODO')
        }
    },
    created() {
        this.$store.dispatch('GET_TODO')
    }
}
</script>

Answer 1

there is an idea that the problem is in the add_todo method. All actions are asynchronous, mutations occur only after receiving a response from the server, but add_todo does not care about this at all.
GET request when adding is sent without waiting for a response from POST and returns elements without the last added. After the response from POST, the last added is added to the elements, and without id.