SOURCE

let app = new Vue({
  el: '#app',
  data: {
  	xp: 10
  },
  methods: {
  	addXP: function() {
    	this.xp += 10;
    },
    decreaseXP: function() {
    	this.xp -= 10;
    }
  },
  computed: {
  	level: function() {
    	let xp = this.xp;
    	if( xp >= 100 ) {
      	return 'Pro';
      } else if( xp >= 50 ) {
      	return 'Intermediate';
      } else if( xp >= 0 ) {
      	return 'Beginner';
      }	else {
      	return 'WTF?';
      }
    }
  }
});

<div id="app">
  <h1>You are a {{ level }}</h1>
  <hr>
  <p>Cerrent XP: {{ xp }}</p>
  <button @click="addXP">addXP</button>
  <button @click="decreaseXP">decreaseXP</button>
</div>