load data from API as soon as Vue component loads

i'm trying to get data from my controller and push it to the view as soon as the view loads using laravel and Vue.js

here's what im doing

<script>
        var app = new Vue({
          el: '#app-3',
          data: {
            my_products: [
                {id:1 , name:'ali'},
                {id:3 , name:'mohamed'}
            ],
            error: ''
          },
        mounted: function () {

            },
        methods: {

        },
        created(){
            axios.get('http://localhost:8000/getProducts')
                .then(function (response) {
                  this.my_products = response.data,
                  console.log(this.my_products)
                  return this.my_products
                })
                .catch(function (error) {

                  console.log(error)
                });
            console.log(this.my_products)
         }

        })           
    </script>

how'ever the data logged to console is the 1 from data not the 1 i get from the function ,so when i output it there in the html:-

<ul v-for="product in my_products" >
                <li> @ </li>
            </ul>

it output the names not the rendered data? how can i resolve this? i tried watchers and did't work.

via Chebli Mohamed