Laravel + Vue.js does not pass variables to component

I am working on this project with Laravel and Vue.js . I need to show a table with a lot information. For this I decided to use a Vue component that renders a table and the paging buttons with little information.

This works very well in the theory, because in practice the variables that happened to the instance of the component are not obtained correctly (or I do not know how to do it).

I have three fundamental parts if I'm not mistaken:

The app.js file that contains the main instance and the API call:

Vue.component('activities-table', require('./components/ActivitiesTableComponent.vue'));
...
const app = new Vue({
    el: '#app',
    data: {
        ...
        activities: [],
        ...
    },
    mounted: function() {
        ...
    },
    created: function() {
        ...
        this.loadActivities();
        ...
    },
    methods: {
        ...
        loadActivities: function(page = 1) {
            axios.get('/api/admin/actividades?page=' + page)
                .then(function (response) {
                    app.activities = response.data;
                });
        },
        ...
    },
    ...
});

I think it is important to emphasize that the call to the API is done correctly and that the information returned is a JSON file, from the contractor. This one has a very simple method:

public function getActivities(Request $request)
{
    $activities = Activity::orderBy('created_at', 'desc')->paginate(100);

    return $activities;
}

This returns a LengthAwarePaginator object with the following information:

That translated to JSON is:

  

Note: This can also be seen in the Vue developer tool where activities has the correct information.

Taking a big leap of information, we render the table with the element <activities-table :rows="this.activities"></activities-table> and then in it we define:

<template>
    <!-- Actividades -->
    <table id="activities" class="table table-bordered table-striped" width="100%">
        ...
    </table>
    <!-- /Actividades -->

    <!-- Paginación -->
    <div class="row d-flex justify-content-center pt-4">
        ...
    </div>
    <!-- /Paginación -->
</template>

<script>
    module.exports = {
        props: [ 'rows' ],
        data: function() {
            return {
                data: this.rows
            }
        },
        created: function() {

        },
        methods: {
            paginate: function(page) {
            }
        }
    }
</script>

When I do console.log(this.rows) in the cycle created or mounted I get the following information:

[

Why does not this work?