Assigning data in using x-init of alpine are not applied

[PetroGromovo]

Hello,

With [email protected] and axios": "^0.19.2 I try to get data using x-init, as I
read here https://github.com/alpinejs/alpine with code :

<div
    class="todo_list_wrapper"
    x-data="addTodos()"
    x-init="initTodos()"
>
    
    <ul>
        
        <template x-for="nextTodo in todos" :key="nextTodo.id">
            <div class="todo_content_1 row_content">
                <div class="m-2" x-text="nextTodo.title" :class="{ 'todo_completed' : nextTodo.completed } " >
                </div>
            </div>
        </template>
    
    
    </ul>

</div>

<script>
    function initTodos() {
        console.log('initTodos()::')
        axios.get('/api/todos', {
        }).then((response) => {
            console.log("response::")
            console.log(response)
            this.todos= response.data
            console.log('FROM initTodos() this.todos::')
            console.log(this.todos)
        }).catch((error) => {
            console.error(error)
        });

    }

    function addTodos() {
        console.log('addTodos::')
        return {
            todos : [],

            /*
                        todos : [{
                            id:1,
                            title:"Task 1",
                            completed: true
                        },
                            {
                            id:2,
                            title:"Task 2",
                            completed: false
                        }],
            */

        }
    }

in the console I see that addTodos with data declaration is run firstly and initTodos() with data
retrieved from db : https://imgur.com/a/zSj23Ad
but my listing is empty. If to uncomment 2 lines inside of function addTodos( - I see these rows,
but not returned from db.

What is wrong ?

Thanks!

[ryangjchandler]

@PetroGromovo Please define the x-init callback on the component's data object. See:

function addTodos() {
    return {
        todos: [],
        initTodos() {
            // ... put method here
        }
    }
}