Component: Plan.vue

<template>
    <div>
        <div class="col-xs-12 col-md-6">
            <div class="bg-blue text-center" style="padding: 5px;font-weight: bold;">
                <div v-if="index === '1'">
                    Poniedziałek
                </div>
                <div v-else-if="index === '2'">
                    Wtorek
                </div>
                <div v-else-if="index === '3'">
                    Środa
                </div>
                <div v-else-if="index === '4'">
                    Czwartek
                </div>
                <div v-else-if="index === '5'">
                    Piątek
                </div>
                <div v-else-if="index === '6'">
                    Sobota
                </div>
                <div v-else-if="index === '7'">
                    Niedziela
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <table class="table">
                        <thead>
                        <tr class="info">
                            <th>
                                <small>Część ciała</small></th>
                            <th>
                                <small>Ćwiczenie</small></th>
                            <th>
                                <small>Serie</small></th>
                            <th>
                                <small>Powtózenia</small></th>
                            <th>
                                <small>Ciężar</small></th>
                            <th>
                                <small>Czas</small></th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="ones in plan">
                            <td>{{ones.part.name}}</td>
                            <td>{{ones.exercise.type}}</td>
                            <td>{{ones.series}}</td>
                            <td>{{ones.repeat}}</td>
                            <td>{{ones.weight}}</td>
                            <td>{{ones.time}}</td>
                            {{ones.id}}
                            <td><a class="btn btn-danger btn-xs" style="margin-left: 5px;" @click="$emit('delete-plan')">
                                <i class="fa fa-times" aria-hidden="true"></i>
                            </a></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props:['plan','index']
    }
</script>
Component: Plans.vue

<template>
   <div class="row">
       <single-plan v-for="(plan,index) in plans" :index="index" :plan="plan" @delete-plan="deletePlans"></single-plan>
   </div>
</template>

<script>
    import Plan from './Plan.vue'
    export default {
        created() {
            this.giveit();
        },
        data () {
            return {
                plans:[]
            };
        },
        components:{
            'single-plan' : Plan
        },
        methods: {
        giveit(){
                  axios.get('/klient/test')
                      .then( (response) => {
                        this.plans = response.data.plans;
                        console.log(response);
                })
                      .catch(function (error) {
                          console.log(error);
                      });
                },
            deletePlans(plan) {
                axios.delete('/klient/planyajax/'+plan.id)
                        .then(response=>{
                            let index = this.plans.indexOf(plan);
                            this.plans.splice(index,1);
            }
        }
    }
</script>
Why $emit not delete data? why deletePlans(plan) gives me all plan not only clicked?