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

Question

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?

UPDATED: Here's my models and tables: Student.php

 public function sectionSubjects()
 {
    return $this->belongsToMany(SectionSubject::class,'section_subject_student', 'student_id','section_subject_id')
    ->withTimestamps();
 }

SectionSubject.php

protected $table = 'section_subject';

public function students()
{
    return $this->belongsToMany(Student::class, 'section_subject_student','section_subject_id','student_id'
        )->withTimestamps();
}

public function assignStudents(Student $student)
{
    return $this->students()->save($student);
}

public function subject()
{
    return $this->belongsTo(Subject::class);
}

public function section()
{
    return $this->belongsTo(Section::class);
}

section_subject_student table

    Schema::create('section_subject_student', function (Blueprint $table) {
        $table->increments('id');

        $table->integer('student_id')->unsigned();
        $table->integer('section_subject_id')->unsigned();

        $table->foreign('student_id')
              ->references('id')
              ->on('students')
              ->onDelete('cascade');

        $table->foreign('section_subject_id')
              ->references('id')
              ->on('section_subject')
              ->onDelete('cascade');

        $table->timestamps();
    });

Subject Model

public function sections()
{
    return $this->belongsToMany(Section::class)->withPivot('id','schedule','room_no');
}

public function sectionSubjects()
{
    return $this->hasMany(SectionSubject::class);
}

Section Model

public function subjects()
{
    return $this->belongsToMany(Subject::class)->withPivot('id','schedule','room_no');
}

public function sectionSubjects()
{
    return $this->hasMany(SectionSubject::class);
}

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>{{ $reserved->section->section_code }}</td>
              <td>{{ $reserved->subject->subject_code }}</td>
              <td>{{ $reserved->subject->subject_description }}</td>
              <td>{{ $reserved->schedule }}</td>
              <td>{{ $reserved->subject->units }}</td>
              <td>{{ $reserved->room_no }}</td>
              <td>
                <button class="btn btn-xs btn-danger">Delete</button>
              </td>
            </tr>
            @endforeach

          </body>

OUTPUT to crabbly's suggestion

[
  {
    "id": 1,
    "section_id": 1,
    "subject_id": 1,
    "schedule": "MWF 9:00 - 10:00 am",
    "room_no": "M305",
    "pivot": {
      "student_id": 1,
      "section_subject_id": 1,
      "created_at": "2016-05-17 01:52:37",
      "updated_at": "2016-05-17 01:52:37"
    }
  },
  {
    "id": 4,
    "section_id": 2,
    "subject_id": 1,
    "schedule": "MWF 1:00 - 2:00 pm",
    "room_no": "M303",
    "pivot": {
      "student_id": 1,
      "section_subject_id": 4,
      "created_at": "2016-05-17 01:52:46",
      "updated_at": "2016-05-17 01:52:46"
    }
  },
  {
    "id": 5,
    "section_id": 2,
    "subject_id": 2,
    "schedule": "MWF 2:00 - 3:00 pm",
    "room_no": "M305",
    "pivot": {
      "student_id": 1,
      "section_subject_id": 5,
      "created_at": "2016-05-17 01:52:56",
      "updated_at": "2016-05-17 01:52:56"
    }
  }
]