Updating custom component's form after getting a response

I'm trying to load in a Tutor's profile in a custom component with Laravel Spark. It updates with whatever I enter no problem, but the <textarea> is always empty when loaded.

The component itself is as follows:

Vue.component('tutor-settings', {

    data() {
        return {
            tutor: [],

            updateTutorProfileForm: new SparkForm({
                profile: ''
            })
        };
    },

    created() {
        this.getTutor();

        Bus.$on('updateTutor', function () {
            this.updateTutorProfileForm.profile = this.tutor.profile;
        });
    },

    mounted() {
        this.updateTutorProfileForm.profile = this.tutor.profile;
    },

    methods: {
        getTutor() {
            this.$http.get('/tutor/current')
                .then(response => {
                    Bus.$emit('updateTutor');
                    this.tutor = response.data;
                });
        },

        updateTutorProfile() {
            Spark.put('/tutor/update/profile', this.updateTutorProfileForm)
                .then(() => {
                    // show sweet alert
                    swal({
                        type: 'success',
                        title: 'Success!',
                        text: 'Your tutor profile has been updated!',
                        timer: 2500,
                        showConfirmButton: false
                    });
                });
        },
    }
});

Here's the inline-template I have:

<tutor-settings inline-template>
    <div class="panel panel-default">
        <div class="panel-heading">Tutor Profile</div>

        <form class="form-horizontal" role="form">
            <div class="panel-body">
                <div class="form-group" :class="{'has-error': updateTutorProfileForm.errors.has('profile')}">
                    <div class="col-md-12">
                        <textarea class="form-control" rows="7" v-model="updateTutorProfileForm.profile" style="font-family: monospace;"></textarea>

                        <span class="help-block" v-show="updateTutorProfileForm.errors.has('profile')">
                            @{{ updateTutorProfileForm.errors.get('profile') }}
                        </span>
                    </div>
                </div>
            </div>
            <div class="panel-footer">
                <!-- Update Button -->
                <button type="submit" class="btn btn-primary"
                        @click.prevent="updateTutorProfile"
                        :disabled="updateTutorProfileForm.busy">
                    Update
                </button>
            </div>
        </form>
    </div>
</tutor-settings>

Very new to Vue and trying to learn on the go! Any help is much appreciated!