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

У меня есть два списка, пользователь может перетаскивать элементы из списка 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.info(response.data);
            }).catch((error) => {
                console.info(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>

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