各位大大你們好，想請問一下，
以下的 Template 我是用 draggable 搭配 element ui，第二層的 draggable 有增加子項目的功能我不知道如何透過 click 後抓到該陣列？因為沒有抓的話他會所有的按鈕都同樣只增加第一個。

介面長這樣

<draggable v-model="areaList">

  <el-card 
  shadow="hover"
  v-for="(element, idx) in areaList"
  :key="element.areaListId"
  >
    <el-row :gutter="10">
      <el-col :span="20">
        <el-input v-model="element.name" size="small" placeholder="選單名稱"></el-input>
      </el-col>
      <el-col :span="4">
        <el-button size="small" @click="areaRemoveMenu(idx)">刪除</el-button>
      </el-col>
    </el-row>

    <!-- 子項目 -->
    <draggable :list="element.children" :options="{ forceFallback: true }">
     
        <el-row 
        class="es_menu_child" 
        v-for="ele in element.children" 
        :key="ele.alChildId">
          <el-col :span="20">
            <el-input v-model="ele.name" size="small" placeholder="選單名稱"></el-input>
          </el-col>
          <el-col :span="4">
            <el-button 
            size="mini" 
            type="danger" 
            icon="el-icon-close" 
            plain circle 
            @click="sideremoveMenu(idx)"></el-button>
          </el-col>
        </el-row>

    </draggable>
    <el-button size="small" @click="areaAddChildMenu">新增地區</el-button>
    
  </el-card>
  
</draggable>

<el-button  type="primary" plain @click="areaAddMenu">新增城市</el-button>

以下是Vue的部分

//引入外掛
import draggable from "vuedraggable";

//demo用：假設id起始為2
let tagListId = 2,
    areaListId = 2,
    alChildId = 2;

export default {
  name: 'themeEdit',
  components: {
    draggable,
  },


  data() {
    return {
      areaList: [
        {
          name: '台北市', areaListId: '0',
          children: [
            {name: '中山區', alChildId: '0'},
            {name: '信義區', alChildId: '1'},
          ]
        },
        {
          name: '台中市', areaListId: '1',
          children: [
            {name: '士林區', alChildId: '0'},
            {name: '中山區', alChildId: '1'},
          ]
        }
      ]
    }
  },
  methods: {
    // 這裏我將他的 this.areaList 改成 this.areaList[0] 這只能抓到第一個，不能抓到點擊後的該數據 -->
    areaAddChildMenu: function() {
      alChildId++
      this.areaList[0].children.push({ name: '', alChildId});
    },
    //這個可以直接使用沒問題
    areaAddMenu: function() {
      tagListId++;
      this.areaList.push({ name: '', linkslug:'', tagListId:'' });
    }
    
    //刪除地區
    areaRemoveMenu(idx) {
      this.areaList.splice(idx, 1);
    },
    
  },
  

由於之前用 jQuery 都是想著怎麼在點擊後取得XXX再執行，不知道目前這樣寫的方向在Vue是對的嗎？
感謝大大抽空閱讀我亂亂的程式碼~