Компонент Vue на странице HTML

Question

Я создаю компонент vue comments на существующей HTML-странице, но получаю 500. Внутренняя ошибка сервера

Отображаемая страница имеет URL-адрес http://sim.admin/viewjournalentry

* 1005.* Компонент vue завершает вызов следующего http://sim.admin/viewjournalentry/comments (отсюда внутренняя ошибка сервера)

Мой файл api.php содержит следующие маршруты

use Illuminate\Http\Request;
use App\JournalComment;

Route::group(['middleware' => 'api'], function(){
    //Get comments
    Route::get('comments', function(){
        return JournalComment::latest()->orderBy('created_at', 'desc')- 
        >get();
    });

    //Get Single comment
    Route::get('comments/{id}', function(){
        return JournalComment::findOrFail($id);
    });

    //Add comment
    Route::post('comments/store', function(Request $request){
        return JournalComment::create(['comment' => $request- 
            >input['comment']]);
    });

    //Update Comment
    Route::patch('comments/{id}', function(Request $request, $id){
        JournalComment::findOrFail($id)->update(['comment' => $request- 
            >input(['comment'])]);
    });

    //Delete Comments
    Route::delete('comments/{id}', function($id){
        return JournalComment::destroy($id);
    });
});

КомментарииФайл .vue содержит следующий код

<template>
    <div>
        <h2>Trade Comments</h2>
        <form action="#" @submit.prevent="edit ? updateComment(comments.id) : 
            createComment()">
        <div class="form-group">
            <label>Comment</label>
            <textarea v-model="comments.comment" class="form-control" 
              placeholder="write a comment..." rows="3"></textarea>
        </div>
        <div class="form-group">
            <button v-show="!edit" type="submit" class="btn btn-primary">Add 
             Comment</button>
            <button v-show="edit" type="submit" class="btn btn- 
            primary">Update Comment</button>
        </div>
        </form>
    </div>
</template>
<script>
export default {
    data: function() {
        return {
            edit: false,
            list:[],
            comments:{
                id:'',
                comment:''
            }
        }
    },
    mounted: function() {
        console.log('Comments Component Loaded...');
        this.fetchCommentList();
    },
    methods: {
        fetchCommentList:function(){
            console.log('Fetching Comments');
            axios.get('comments')
                .then(function(response){
                    console.log(response.data);
                    this.list = response.data;
            }).catch(function(error){
                console.log(error);
            });
        },
    }
}
</script>

Файл модели настроен следующим образом

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class JournalComment extends Model
{
    public function journal(){
        return $this->belongsTo('App\Journal', 'journal_id');
    }
}