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

//Эти компоненты в реальном приложении
// будут импортированы из отдельных файлов
const settings = {
	template: '<h1>Component Settings</h1>'
};
const users = {
	template: '<h1>Component Users</h1>'
};
const history = {
	template: '<h1>Component History</h1>'
};


new Vue({
  el: "#app",
  components: {
  	settings,
  	users,
    history,
  },
  data() {
  	return {
    	active: 'users',
    }
  },
  methods: {
	  switchActive: function(view) {
    	this.active = view;
      console.log("ok");
    }
  },
})