How design Vue recursive array items?

I am trying to implement a recursive component, which can be exemplified as a recursive todo list. In the root component I can add new todos. A todo may have its own sub todos.

The Todo class

export class Todo {
    constructor(text) {
        this.id = Math.random()
        this.text = text
        this.todos = []
    }
}

Root component

<template>
    <div class="w-full px-3 py-3">
        <todo-card v-for="todo in todos" v-bind:key="todo.id"
            v-bind:todo="todo"
        ></todo-card>
        <div class="m-4 mt-8 p-4 border-t-2 border-gray-300">
            <i @click="addTodo" class='p-2 text-gray-400 fa fa-plus' title='Add Todo'></i>
        </div>
    </div>
</template>

<script>

export default {

    data: function () {
        return {
            todos: [
                new Todo('Make a call'),
                new Todo('Clean the house'),
            ]
        }
    },

    methods: {
        addTodo: function(e) {
            this.todos.push(new Todo('No name yet'))
        }        
    }
}
</script>

Todo Card component

<template>
    <div class="m-4 px-4 py-2 border-dashed border-2 border-gray-300 bg-blue-100">
        <div class="flex justify-between">
            <span class="text-sm text-gray-400"> {{todo.text}}</span>
        </div>
        <todo-card
            v-for="todo in todo.todos"
            v-bind:key="todo.id"
            v-bind:todo="todo"
        ></todo-card>       

        <div class="m-4 pt-4">
            <i @click="addTodo" class='text-gray-400 fa fa-plus' title='Add Section'></i>
        </div>                                        
    </div>
</template>

<script>

import { Todo } from '../js/Todo'

export default {

    props: [
        'todo',
    ],

    data: function () {
        return {
            todos: this.todo.todos
        }
    },

    methods: {
        addTodo: function(e) {
            this.todos.push(new Todo('New todo')) 
        }
    },
}
</script>

I can use the addTodo in my root component, but when trying to add new sub-todos I get

Cannot read property '_wrapper' of undefined

I tried modifying the data properties in other ways to make sure Vue picked up changes but had o success so far. Any ideas what error I might have here and how to fix it?