How to fetch data of laravel pivot table using vue js and vue-resource

I have this project that is using a pivot table. However, when I am using vue resource and vue js to fetch data in my ReservationController it seems not working. See code below. What is the correct way of fetching data in a pivot table?

ReservationController.php

public function index()
{
    $secSubs = Student::find(1);
    return $secSubs->sectionSubjects;

}

all.js

new Vue({
el: '#app-layout',

data: {

    subjects: []

},
ready: function(){
    this.fetchSubjects();
},
methods:{

    fetchSubjects: function(){
        this.$http({
            url: 'http://localhost:8000/reservation',
            method: 'GET'
        }).then(function (subjects){
            this.$set('subjects', subjects)
            console.log('success');
        }, function (response){
            console.log('failed');
        });
    },

}

});

Lastly here's my index.view. Here I want to display all data in my pivot table. Here's my code when using the foreach method of laravel. However, I want to use vue js (v-for) to fetch data. Can anyone please help me on this?

 @inject('reservation', 'App\Http\Controllers\ReservationController')
            @foreach( $reservation->index() as $reserved )
            <tr>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td>
                <button class="btn btn-xs btn-danger">Delete</button>
              </td>
            </tr>
            @endforeach

          </body>

via Chebli Mohamed