Laravel VueJS obtain data of parent model

I am trying to obtain a relationship value in vue. I have a simple relationship setup. A User can have many Reports and a Report belongs to a User. A User is able to create a Report. When they visit the reports page to see all their reports, the following function is called

public function index()
{
    $user_id = Auth::user()->id;
    return Report::latest()->where('user_id', $user_id)->paginate(20);
}

So it basically retrieves all reports that matches the logged in user id.

Within my view, this is what calls the above function

<script>
    export default {
        data() {
            return {
                reports: {}
            }
        },
        methods: {
            loadFiles() {
                axios.get("api/report").then(({ data }) => (this.reports = data));
            }
        },
        created() {
            this.loadFiles();
            Fire.$on('AfterCreate',() => {
                this.loadFiles();
            });
        }
    }
</script>

I am then displaying a users reports using a loop

<tr v-for="report in reports.data" :key="report.id">
    <td></td>
    <td></td>
</tr>

So the above works without any issues. What I was wondering is how I can actually obtain the users name from the report model? So instead of report.user_id, I would need something like report.user_id.name where name is a field within the users table. Obviously this does not work, so I was wondering if it was possible. I know how to get child data, but never really worked on getting parent data

Thanks

via Chebli Mohamed