app.js

new Vue({
    el: '#assignment-creator',
    data: {
        trainee: {}
    },
    ready: function () {
        this.trainee = TrainRemote.trainee;
    }
});

template.html

<script>
var TrainRemote = {
    trainee: {
        id: 5,
        name: 'Matt Stauffer'
    }
};
</script>

<div id="assignment-creator" v-cloak></div>

So, my question is: What's the idiomatic (suggested/in-line with Vue styles/practices) way to pass outside data to a Vue instance?

I know if it were a sub-component I'd make it a prop, and then just add it as a property to the <div id="assignment-creator"> element.

But since this is the parent component, is there a better way to pass outside data in (assuming you're not making HTTP calls)?

Or just...

<assignment-creator trainee-id="{{ $trainee->id }}" trainee-name="{{ $trainee->name }}"></assignment-creator>

Vue.component('AssignmentCreator', {
    props: ['traineeId', 'traineeName'],
    // etc.
});