How to load model relationships inside an event Laravel 5.3 - laravel

Question

I have an event for when a new article is created. On another page I am listening for this event (VueJs and Laravel Echo), and then appending the newly created article to the articles list (actually unshifting), which then updates the view reactively. However, an article has an author which is related to the users table. I keep getting error and Vue keeps crashing because the article doesn't have an author attribute. Which is because the author is a relationship. I have tried putting $this->article->load('author') in the __construct method of the event itself, and I've tried using load('author') before sending the article to the event. Neither have worked at all. How can I maintain this relationship in the event so that it will be sent in the broadcast, in turn allowing Vue to access it as a property?
Template:
<template>
<div>
<div class="article-preview-container" v-for="article in articles">
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title"><a :href="article.slug">{{ article.title}}</a></h2>
</div>
<div class="panel-body">
<p class="lead">
<span class="glyphicon glyphicon-time"></span> {{ article.created_at }} |
<span class="glyphicon glyphicon-user"></span> {{ article.author.full_name }}
</p>
<div class="article-preview">
<img :src="article.main_image" :alt="article.title">
<p>{{ article.preview }}</p>
</div>
</div>
</div>
</div>
<infinite-loading :on-infinite="onInfinite" ref="infiniteLoading" spinner="spiral">
<span slot="no-more">
There are no more articles to display :(
</span>
</infinite-loading>
</div>
</template>
<script>
import InfiniteLoading from 'vue-infinite-loading';
export default {
mounted() {
Echo.channel('articles').listen('ArticleCreated', (event) => {
console.log(event.article.author);
this.articles.unshift(event.article);
});
},
data() {
return {
articles: [],
skip: 0,
};
},
methods: {
onInfinite() {
axios.get('/articles/' + this.skip).then(function (response) {
if(response.data.length > 0) {
this.articles = this.articles.concat(response.data);
this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded');
if(response.data.length < 5) {
this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
} else {
this.skip += 5;
}
} else {
this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
}
}.bind(this));
},
},
components: {
InfiniteLoading,
},
};
</script>
Event:
<?php
namespace App\Events;
use App\Article;
use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
class ArticleCreated implements ShouldBroadcast {
use InteractsWithSockets, SerializesModels;
public $article;
/**
* Create a new event instance.
*
* #return void
*/
public function __construct(Article $article) {
$this->article = $article;
//tried $this->article->load('author')
//tried $this->article = $article->with('author')
//tried loading author using just $this->article->author
}
/**
* Get the channels the event should broadcast on.
*
* #return Channel|array
*/
public function broadcastOn() {
return new Channel('articles');
}
}