internal server error laravel 5.4 with axios and vue.js

i'm sending a simple GET request via axios but it keeps saying internal server error, the parameter is sent correctly and shows in the route, when i remove it, the route works fine and gets the respond but when i add it to the route, it doesnt work here is the front end

<div id="app">
                        <div class="panel panel-default">
                              <div class="panel-body">
                                    <friend :profile_user_id=""></friend>
                              </div>
                        </div>
                  </div>

and here is the Friend.vue

<template>
    <div class="container">
        <div class="row">

            component ready

        </div>
    </div>
</template>

<script>
    export default {
        mounted() {

axios.get('/check_relationship_status/' + this.profile_user_id)
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
        },
        props: ['profile_user_id'],
    }
</script>

and here is the route:-

Route::get('check_relationship_status/{id}', function ($id) {
    return 1;
});

i get this error

app.js:841 GET http://socialnetwork.dev/check_relationship_status/6 500 (Internal Server Error)

the URL seems right as the $id is there, does any 1 know whats going on?

via Mohamed Gabr