Vue run function from child component? - vue.js

Question

I have html like this:
<div id="nav">
<homenav v-on:navigation="switchNav(this.nav)" v-if="nav == 'homeNav'"></homenav>
<mainav v-if="nav == 'mainNav'"></mainav>
</div>
My Js is like this:
Vue.component('homenav', Navigation);
Vue.component('mainav', Navigation2);
new Vue({
el: '#nav',
data: {
nav: 'homeNav'
},
methods: {
switchNav: function (test) {
console.log(test);
console.log(this.nav);
}
}
});
Part of homenav component to show what I want to do:
<template>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="">Website Builder</a>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav nav-fill w-100">
<li class="nav-item">
<a class="nav-link" href="/#/">Create</a>
</li>
<li class="nav-item">
<a v-on:click="navData" class="nav-link" href="/#/how">How</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/#/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/#/youtube">Videos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/#/login">Go to main site</a>
</li>
</ul>
</div>
</nav>
</template>
<script>
export default {
data() {
return {
nav: ''
}
},
methods: {
navData () {
this.nav = 'mainNav';
this.$emit('navigation');
console.log(this.nav);
}
}
}
So what I am trying to accomplish here is a dynamic switch in navigation, for example if user click on Go to main site link the nav would change from homenav to mainav dynamically. However, I don't know how to accomplish it and my attempt is above. Help..
Edit so in my newest attempt I have managed so that it console log from child + parent function. it consoles homeNav and mainNav together. However I need to also pass the child this.nav to parent so parent can update it's this.nav? Because at the moment despite it outputting both, navigation doesn't change.

Answer 1

The best way to achieve that is using Vue Router.
But, if you want to do that without routing you should do it with Dynamic Components
<component is=""></component>
You can see an example here: https://jsfiddle.net/lucaskatayama/256Lo0xa/1/
There is an App, with a button to toggle a component inside <component></component>.
It simulates your switch, by changing the selected component.