Как получить данные сводной таблицы laravel, используя vue js и vue-resource

Question

У меня есть этот проект, который использует сводную таблицу. Однако, когда я использую vue resource и vue js для извлечения данных в моем ReservationController, это кажется не работает. Смотрите код ниже. Как правильно выбрать данные в сводной таблице?

ОБНОВЛЕНО: Вот мои модели и таблицы: 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

    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();
    });

Предметная модель

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

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

Модель раздела

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');
        });
    },

}

});

Наконец, вот мой index.view. Здесь я хочу отобразить все данные в моей сводной таблице. Вот мой код при использовании метода foreach в laravel. Тем не менее, я хочу использовать vue js (v-for) для извлечения данных. Может кто-нибудь, пожалуйста, помогите мне в этом?

 @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>

ВЫВОД на предложение Краббли

[
  {
    "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"
    }
  }
]