关于VUE中递归组件的学习产生的相关BUG和解决

BUG的产生

vue的递归组件，因为一开始学习VUE只会组件的相关数据绑定来源于父组件，最后出现了需要达到控制递归组件中的任意一个，但是无法确定是哪个，导致一控就是全部的问题。

昨天早上想到是否可以递归的数组变成对象数组去达到呢？？最后通过绑定数据获取index值，父组件中的data的list变成对象数组，子组件相关绑定数据变为item.属性， 通过触发事件执行函数中$emit反馈index值和自己子组件的data的对象给父组件， 触发监听函数执行，操作list，最后重新渲染页面，达到单个控制递归组件的其中一个。以下就是我自己写的修改BUG的代码。

自己写的修改BUG的代码

<div id="Box">
    <div v-for="(item,index) of list" :key="item.number">
        <myinput :value="item.input_text" :disabled="item.btn_disabled"></myinput>
        <outbutton @change_disabled="btn_click" :number="index"></outbutton>
    </div>
</div>

<script>
    var myinput = {
   
        template:`<input type="text">`
    };
    
    var outbutton = {
   
        props:["number"],
        data:function(){
   
            return{
   
                btn_value : "修改",
                obj:{
   
                    number: 0,
                    input_text: "第一个",
                    btn_disabled: true,
                    btn_style: {
   
                        backgroundColor: "black",
                        color: "white"
                    }
                }
            }
        },
        template: `<button @click="btn_click" ref="name">{
    {btn_value}}</button>`,
        methods: {
   
            btn_click:function () {
   
                this.$refs.name.className = this.obj.btn_disabled ? "unlock" : "";
                this.obj.btn_disabled = !this.obj.btn_disabled;
                this.obj.number = this.number;
                this.btn_value = this.obj.btn_disabled ? "修改" : "确认";
                console.log(this.obj.btn_disabled);
                console.log(this.obj.btn_content = "修改");
                this.$emit("change_disabled",[this.obj, this.number])
            }
        }
    };

    var vm = new Vue({
   
        el:"#Box",
        data:{
   
            list: [{
   
                number: 0,
                input_text: "第一个",
                btn_disabled: true,
                btn_style: {
   
                    backgroundColor: "white",
                    color: "black"
                }},{
   
                number: 1,
                input_text: "第二个",
                btn_disabled: true,
                btn_style: {
   
                    backgroundColor: "white",
                    color: "black"
                }}