test.html

<div id="example">
	<test v-bind:type=type v-bind:a="a" v-bind:b="b"></test>
</div>

test.js

Vue.component('x-label', {
	name: 'x-label',
	props: ['msg'],
	template: '<input v-model="msg"><span>{{ msg }}</span>'
});
Vue.component('test', Either({
	'a': Vue.component('x-label'),
	'b': Vue.component('x-label')
}));
new Vue({
	el: '#example',
	data: {
		type: 'b',
		a: {msg: 'aaa'},
		b: {msg: 'bbb'}
	}
});

vue-Either.js

function Either(settings){
	var template = '';
	var props = ['type'];
	for(var key in settings){
		var Type = settings[key];
		var binds = '';
		for(var subprop in Type.options.props){
			binds += ' ' + 'v-bind:' + subprop + '.sync="' + key + '.' + subprop + '"'
		}
		template += '<div v-show="(type === \'' + key + '\')">'
			+ key + ': <' + Type.options.name + ' ' + binds + '></' + Type.options.name + '><br/>'
			+ '</div>';
		props.push(key)
	};
	var select = '<select v-model="type">'
		+ (props.slice(1).map(function(s){ return '<option>' + s + '</option>'}))
		+ '</select>'
	return Vue.extend({
		template: '<div>' + select + template + '</div>',
		props: props
	})
}