Vueでネストの深いオブジェクトから特定の要素を削除したい。

前提・実現したいこと

https://jp.vuejs.org/v2/examples/tree-view.html
このURLを参考にツリー表示をやっていたのですが、このサンプルには削除機能がなく、自力で削除機能を作っていたのですが、データがネストしているため、深い所の要素の削除ができません。
以下のソースコードのdelete-itemが該当部分です。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <link rel="stylesheet" href="./style.css">
8    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
9    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
10    <title>ツリー</title>
11
12    <script type="text/x-template" id="item-template">
13        <div>
14          <li>
15            <i class="fas fa-chevron-right" 
16               @click="toggle" 
17               :class="{rorate: isOpen}">
18            </i>
19              {{item.name}}
20              <i class="fas fa-minus-circle"
21                @click="$emit('delete-item',{item:item,index:index})"
22              ></i>
23          </li>
24            <ul v-show="isOpen">
25                <li 
26                   v-for="(child,index) in item.children"
27                   :key="index">
28                      <tree-item
29                      :item="child"
30　　　　　　　　　　　　:index="index"
31                      @add-item="$emit('add-item', $event)"
32                      @delete-item="$emit('delete-item', $event)">
33                      </tree-item>
34                </li>
35                <li class="add" >
36                    <i class="fas fa-plus-circle"　@click="$emit('add-item', item)"></i>
37                </li>
38        </ul>
39        <div>
40    </script>
41
42</head>
43
44<body>
45    <div id="app">
46        <ul>
47            <tree-item 
48            :item="treeData"
49            @add-item="addItem"
50            @delete-item="deleteItem">
51            </tree-item>
52        </ul>
53    </div>
54</body>
55
56<script src="Tree.js"></script>
57<script src="index.js"></script>
58
59</html>

Vue
1
2let treeData = {
3        name:"プロジェクト名",
4        children:[
5            {
6                name:"ファイル1",
7                children:[]
8            },
9            {
10                name:"ファイル2",
11                children:[]
12            },
13            {
14                name:"ファイル3",
15                children:[
16                    {
17                        name:"ファイル3-1",
18                        children:[
19                            {
20                                name:"ファイル3-2",
21                                children:[]
22                            }
23                        ]
24                    }
25                ]
26            },
27            {
28                name:"ファイル4",
29                children:[]
30            }
31        ]
32} 
33
34
35
36var app=new Vue({
37    el:"#app",
38    data:{
39        treeData:treeData,
40        open:false
41    },
42    methods:{
43        Openlist:function(){
44            this.open=!this.open
45        },
46        addItem: function (item) {
47            if(item.children){
48                return  item.children.push({name: "new folder"})
49            }else{
50                Vue.set(item, "children", []);
51                return item.children.push({name: "new folder"})
52            }
53        },
54        deleteItem: function (item) {
55            treeData.children.map((tree, index) => {
56                if (tree.name == item.item.name) {
57                    if(item.index===index){
58                        return this.treeData.children.splice(index, 1)
59                    }
60                }
61            })
62        }
63    }
64})

この状態ではファイル1~4しか削除できず、そのファイルが持っている childrenは削除できないです。
例えばファイル3-1や、追加したファイルが削除できません。

Vue
1Vue.component('tree-item', {
2    template: '#item-template',
3    props: {
4        item: Object
5    },
6    data: function () {
7        return {
8            isOpen: false
9        };
10    },
11    computed: {
12        isFolder: function () {
13            return this.item.children && this.item.children.length;
14        }
15    },
16    methods: {
17        toggle: function () {
18                this.isOpen = !this.isOpen;
19        },
20    }
21})