多次元配列にあるオブジェクト削除を行いたい(Vue.js)

Question

前提・実現したいこと

（例）Vue.jsでTodo管理を作っています。
v-on:clickを利用して多次元配列のオブジェクトを一つ削除したいのですが、上手くいきません。
削除機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

//googleディベロッパーツール(console)での表示
[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'splice' of undefined"

該当のソースコード

<template>
  <div id="app">
    <h1>Task List</h1>

      <div class="box">
        <input class="input" type="text" placeholder="Title" v-model="newTaskTtitle">
        <input class="input" type="text" placeholder="Content　Shift＋Enterで登録" v-model="newTaskComment" v-on:keyup.shift.enter="addTodo">
      </div>

    　<draggable :options="{ group: 'tasks' }" element="ul" v-for="(list,index) in tasks" v-bind:class="['task__' + index]">
      <li class="card" v-for="item in list" :key="item.status">
        <div class="card-content text">{{ item.name }}</div>
        <div v-if="!isComment" v-on:dblclick="isComment = true">
          <div class="card-footer-item">{{ item.comment }}</div>
        </div>
        <div v-else>
          <input type="text" class="input is-rounded" v-model="item.comment" v-on:blur="isComment=false">
        </div>

　　　　　　　//↓押したタスク（オブジェクト）だけ消したい
           <span class="delele" v-on:click="doDelete(item) in list">削除</span>

        </li>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  name: 'App',
  components: {
    draggable,
  },
  data() {
    return {
      tasks: [
      [{ name: '未完了', status: 1, comment: "その１" },{ name: '未完了', status: 1, comment: "その２" } ],
      [{ name: '仕掛', status: 2, comment: "その１" },{ name: '仕掛', status: 2, comment: "その２" } ],
      [{ name: '完了', status: 3, comment: "その１" },{ name: '完了', status: 3, comment: "その２" } ],
      ],
      isComment: false,
      newTaskTtitle: '',
      newTaskComment: ''
    }
  },
  methods: {
    //タスクの追加
    addTodo: function(){
      this.tasks[0].push({name: this.newTaskTtitle, comment: this.newTaskComment});
      this.newTaskTtitle = "",
      this.newTaskComment = ""
    },
　　//タスクの削除（spliceを使ってみても上手くいかない）
    doDelete: function(item){
      this.item.splice(this.item.indexOf(item),1);
    }
  }
}
</script>

試したこと

  console.log(item)で見ると{__ob__: Observer}と出ていてオブジェクトは取れているのかと思います

補足情報（FW/ツールのバージョンなど）

Vue cli
draggable(ライブラリ）

Answer 1

引数をオブジェクトではなくindexをそのまま渡してはどうですか？

<template>
  <!-- 一部抜粋 -->
  <div id="app">
    <draggable v-for="(list,taskIndex) in tasks">
      <li class="card" v-for="(item, listIndex) in list" :key="item.status">
        <span class="delele" v-on:click="doDelete(taskIndex, listIndex)">削除</span>
      </li>
    </draggable>
  </div>
</template>

<script>
export default {
  methods: {
    doDelete: function(taskIndex, listIndex){
      this.tasks[taskIndex].splice(listIndex, 1);
    }
  }
}
</script>

Comments

[kata.]

ご回答頂きありがとうございます。
試してみたところ、思い通りにitemを削除する事が出来ました。

オブジェクトを渡すと言う考えにとらわれていました。
第二引数にIndex番号を取る事で目的のitemを取得するのですね！
とても勉強になりました。ありがとうございます！