JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<!DOCTYPE html>
<html>
<head>

</head>
<body>
  <div id="app">
     <todo-list></todo-list>
  </div>
</body>
</html>

CSS

#app{
 width:500px;
 margin:0 auto;
 height:auto;
 min-height:400px;
 border:1px solid #000;
}

#app > div {
  padding:10px;
}

nav {
  width:100%;
}

nav button {
  width:calc(50% - 10px);
  margin:0 5px;
}

#todoList {
  width:100%;
}

#addTodo {
}

JavaScript

var todos = [
    { text: 'Learn Vue'}, 
    {text: 'Build Todo App' }
];

var todoHeader = {
    template: `<nav><button v-on:click="switchView('list')">View List</button><button v-on:click="switchView('add')">Add Todo</button></nav>`,
    methods: {
    		switchView: function(view) {
         this.$emit('switch-view', view)
        }
    }
};

var addTodo = {
	props: {
  	currentView: String
  },
	data: function() {
  		return {
        todo: '',
      	todoList: todos
      }
  },
	template: `<div id="addTodo" v-show="currentView == 'add'"><input type="text" v-model="todo" /><button v-on:click="addTodo">Add</button></div>`,
  methods: {
  	addTodo: function() {
   		this.todoList.push({ text: this.todo });
    }
  }
};

var listTodos = {
  props: {
  	currentView: String
  },
	data: function() {
  		return {
      	todoList: todos
      }
  },
  template: `<div id="todoList" v-show="currentView === 'list'"><ul><li v-for="todo in todoList">{{todo.text}}</li></ul></div>`,
};


Vue.component('todo-list', {
	data: function() {
  	return {
    	currentView: ''
    }
  },
  components: {
    'todo-header': todoHeader,
  	'list-todos': listTodos,
    'add-todo': addTodo
  },
  template: 
   `<div>
        <todo-header v-on:switch-view="onSwitchView"></todo-header>
        <list-todos></list-todos>
        <add-todo></add-todo>
    </div>`,
  methods: {
  	onSwitchView: function(view) {
    	console.log(view);
      alert('called');
    }
  }
});



var vue = new Vue({
	el: '#app'
});