Vue

HTML

<div id="app">
  <div class="box_profile">
    <div class="box_left">
        <a href="#" @click.prevent="switchActive('settings')">Settings</a>
        <a href="#" @click.prevent="switchActive('users')">Users</a>
        <a href="#" @click.prevent="switchActive('history')" class="active">History</a>
    </div>
  </div>
  <components :is="active"> </components>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

h1 {
  font-size: 3rem;
}

Vue

Vue.component('settings', {
	template: '<h1>Component Settings</h1>'
});
Vue.component('users', {
	template: '<h1>Component Users</h1>'
});
Vue.component('history', {
	template: '<h1>Component History</h1>'
});
new Vue({
  el: "#app",
  data() {
  	return {
    	active: 'users',
    }
  },
  methods: {
	  switchActive: function(view) {
    	this.active = view;
      console.log("ok");
    }
  },
})