Why is the array initialized from the server in the mount method, but not output using the v-for directive?

Question

Vue.js

Good afternoon.
The application has the following markup:

<div id="app">

    <ul>
        <li v-for="i in info">
            {{ i.title }}
        </li>
    </ul>
</div>

VUE code:

new Vue({
        el: '#app',
        data() {
            return {
                info: null
            };
        },
        mounted() {
            axios({
                method: 'POST',
                headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                url: 'http://local/get-item',
            }).then(function (response) {
                this.info = response.data;
            });
        }

Nothing happens when the page starts.
On the server, for the sake of testing, the array is generated as follows:

$lessons[0] = [
        'title' => 'Описание 1',
        'description' => 'Заголовок 1',
    ];

    $lessons[1] = [
        'title' => 'Описание 2',
        'description' => 'Заголовок 2',
    ];

    echo json_encode($lessons);

It comes to the front like this:

Answer 1

The context is lost, this when processing the response is not a vue instance at all.
Change function (response) {to (response) => {.