Добавить атрибут к unshift элементу vuejs

Question

У меня есть два списка, пользователь может перетаскивать элементы из списка 1 в список 2, и есть кнопка с вводом текста, чтобы пользователь мог добавить свой собственный ввод в список 2, который будет автоматически обновляться в моей базе данных MYSQL с помощью axios.

Это скрипт AddItem

 addItembh(){
                var input = document.getElementById('itemFormbh');
                if(input.value !== ''){

// this line  makes a new article with input value but no attribute :(
                this.tasksNotCompletedNew.unshift({

                   behv_skilldesc:input.value
                });

                 axios.post('../joborder/addAttrib', {
                behv_skilldesc: input.value,
                type:'behvnew',
                    joborder_id: this.joborder_id ,
                    alljobs_id: this.alljobs_id
            }).then((response) => {
                console.log(response.data);
            }).catch((error) => {
                console.log(error);
            });
                input.value='';
            }  
        },

Чтобы быть ясным в вопросе: мне нужно присвоить атрибут моей новой статье, которая создается, чтобы я мог найти текст этого атрибута позже в методе deleteItem

ОБНОВЛЕНИЕ :

<template>
    <div class="row">

        <div class="col-md-4 col-md-offset-2">
            <section class="list">
                <header>Drag or Add Row Here</header>
                <draggable class="drag-area" :list="tasksNotCompletedNew" :options="{animation:200, group:'status',handle:'disabled'}" :element="'article'" @add="onAdd($event, false)"  @change="update">

                    <article class="card" v-for="(task, index) in tasksNotCompletedNew" :key="task.prof_id" :data-id="task.prof_id" @change="onChange">
                        <span >
                            {{ task.prof_skilldesc }}
                        </span>
                        <span v-if="task.prof_skilldesc !== 'Drag Here'">
                        <button  class="pull-left"  @click="deleteItem(task.prof_id) + spliceit(index)" ><i class="fa fa-times inline"></i></button>
                  </span>
                    </article>
                    <article class="card" v-if="tasksNotCompletedNew == ''">
                        <span>
                  Drag Here
                        </span>

                    </article>
                </draggable> 

                <div>
                         <input id='itemForm' />
                <button v-on:click='addItem' class="btn btn-theme btn-success" style='margin-top:5px;' >Add a row </button>
                </div>
            </section>
        </div>
        <div class="col-md-4">   
            <section class="list">
                <header>List of Skills ( Hold left click )</header>
                <draggable class="drag-area"  :list="tasksCompletedNew" :options="{animation:200, group:'status'}" :element="'article'" @add="onAdd($event, true)"  @change="update">
                    <article class="card"
                             v-for="(task, index) in visibleskills"
                           :key="task.prof_id" :data-id="task.prof_id"

                             >
                       {{ task.prof_skilldesc }}
                    <div v-if="index == 4" style="display:none" >{{index2 = onChange(index)}}</div>
                                          </article>
                               <pagination
                   v-bind:tasksCompletedNew ="tasksCompletedNew"
                   v-on:page:update ="updatePage"
                   v-bind:currentPage ="currentPage"
                   v-bind:pageSize="pageSize">

               </pagination>   
                </draggable>  
            </section>
        </div>
    </div>
</template>

Итак, при добавлении строки будет вызван наш метод. Спасибо за любую помощь