Convert eloquent relationship into vue js code

I have this project that should fetch values from a pivot table and one to many relationship. When using the eloquent syntax I am getting the correct output as seen here:

ReservationController

public function index()
{
    $secSubs = Student::find(1);

    return $secSubs->sectionSubjects;

}

form.blade.php

@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

However I want to make use of the feature of vue js so that my page will automatically be populated with value being fetch as seen below.

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

data: {

    subjects: []

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

    fetchSubjects: function(){
        var self = this;

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

}
});

form.blade.php

<tr v-for="subject in subjects">
  <td>@</td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td>@</td>
  <td>
     <button class="btn btn-xs btn-danger">Delete</button>
  </td>
</tr>

As seen in my form.blade.php I cannot get the value of section_code. Am I missing something here?

via Chebli Mohamed