todo for dynamic object and key

arrayInput.vue

<template>
    <div>
        <input type="text" v-model="addValue" ref="addValueRef" @keyup.enter="addToObject()">
        <button @click.prevent="addToObject()">add {{pivotal}}</button>
        <div v-for="(value, index) in obj[pivotal]">
             {{index + 1 }}. <input type="text" v-model="obj[pivotal][index]" :disabled="true" :ref="'input' + index">
            <i
                    @click.prevent="delFromObject(index)"
                    class="mdi mdi-delete trash-can-outline"
            ></i>
            <i
                    class="mdi mdi-pen"
                    @click.prevent="allowEdit(index)"
            ></i>
        </div>
    </div>
</template>

<script>
    export default {
        props:['obj', 'pivotal'],
        data(){
            return {
                addValue:''

            }


        },
        methods:{
            allowEdit(index){
                this.$refs['input'+index][0].removeAttribute('disabled')
                this.$refs['input'+index][0].focus()

            },
            addToObject(){
                if(!this.addValue) return null

                this.obj[this.pivotal].push(this.addValue)
                this.addValue=''
                this.$refs.addValueRef.focus()
            },
            delFromObject(index){
                this.obj[this.pivotal].splice(index, 1)
            }
        }
    }
</script>

<style scoped>

</style>