JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script>


<div id="app">
  <h1>Hello App!</h1>
  <p>
    <router-link to="/">Go to Home Page</router-link>
    <router-link to  ="/login">Login Page</router-link>
    <router-link to="/register">Registration Page</router-link>
  </p>
  <router-view></router-view>
</div>

JavaScript

const Home = { 
  template: `
    <div>
      Home page.
      <p>search initialized: {{searchInitialized}}</p>
    </div>`,
  data(){
    return{
      searchInitialized: false
    }
  },
  methods: {
    initializeSearch(){
      setTimeout(() => {
        this.searchInitialized = true;
      }, 1000)
    }
  },
  beforeRouteEnter (to, from, next) { 
    next(vm => { 
        // access to component's instance using `vm` . this is done because this navigation guard is called before the component is created.

        vm.initializeSearch();
        next();
    }) 
  }    
    
}


const Login = { template: '<div>Login page</div>' }
const Register = { template: '<div>Registration Page</div>' }

const routes = [
  { path: '', component: Home },
  { path: '/login', component: Login },
  { path: '/register', component: Register }
]

const router = new VueRouter({
  routes
})

const app = new Vue({
  router
}).$mount('#app')