[Vuejs]-Component bindings in the Component definition instead of markup?

You can use the data proprerty in the definition of the component.

The example uses the new ‘allprop’ proprerty to get the full object, then in the data function it constructs the objects as needed:

<div id="app">

    <todo-item v-bind:allprop="todo"></todo-item>

</div>

<script>
    Vue.component('todo-item', {
        props: ['allprop'],
        template: '<div>{{ allprop.text }}</div>',
        data: function() {
            return {
                key: this.allprop.id,
                class: [this.allprop.someValue],
                ... more ...
            };
        }
    });
</script>

Working example: https://jsfiddle.net/fjpqz387/132/