500 (Internal Server Error) when POSTing to controller with Axios

Hi!

I'm making an Instagram 'clone' and want to add comments using Axios.

I have a resourceful controller setup and a Vue instance to handle the frontend.

Right now I can display comments but the form at the bottom does not work, and sends a 500 error. Any help would be greatly appreciated.

Here is my form which pushes to the createComment() vue method.

<form v-on:submit.prevent="createComment()" method="post" >
    <div v-bind:class="{'form-group': true, 'has-error': errors.comment}">
        <label>Comment:</label>
            <input type="text" v-model="comment.content" class="form-control">
    </div>
    
    <div class="form-group">
        <button type="submit" class="btn btn-primary">New Comment</button>
    </div>
</form>

The vue method then uses axios to send a post request to the controller

createComment() {
                axios.post('/comments/', {
                    content: this.comment.content,
                  })
                  .then(function (response) {

                    this.comments.push(response.data);
                    this.comment = {content: ''};

                    console.log(response);
                  })
                  .catch(function (error) {
                    console.log(error);
                  });
            },

Here is my commentsController@store

$this->validate($request, [
            'content' => 'required'
        ]);
        $comment = Comment::create([
            'content' => $request->input('content'),
            'user_id' => Auth::user()->id,
        ]);
        return response()->json([
            'comment' => $comment
        ]);

Cheers!