JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.7/vue.js"></script>
<script src="https://rawgit.com/vuejs/vue-validator/master/dist/vue-validator.js"></script>
<div id="app">
	<ul>
		<li><a href="#" v-on="click: switchComponent('defaultComponent')">main page</a></li>
		<li><a href="#" v-on="click: switchComponent('calculate')">calculate values</a></li>
	</ul>
	
	<component is="{{currentView}}"></component>
</div>

<script id="calculateTpl" type="text/x-template">
	<form>
		<p>	
			percent: <input id="percent" type="number" v-model="percent" v-validate="min: 0" number /><span v-show="validation.percent.invalid">invalid</span>
		</p>
	</form>
  
	<div v-repeat="column: columns">
		{{column}}
	</div>
</script>

JavaScript

Vue.component("defaultComponent", {
	template: "<div>main page</div>"
});

Vue.component("calculate", {
    template: "#calculateTpl",
	
	data: function() {
		return {
			columns: ["column 1", "column 2", "column 3"],
			percent: -2,
		}
	}
});

Vue.use(window['vue-validator']);

var vue = new Vue({
    el: '#app',

	data: {
		currentView: "defaultComponent"
	},
    
    methods: {
        switchComponent: function(compName){
            console.log(compName);
            this.currentView = compName;
        }
    }
});