Vue - handling user inputs with v-on directive

Question

<div id="landrover-5">
  <p>{{ defender }}</p>
  <button v-on:click="reverseDefender">Reverse Defender Text</button>
</div>

<script>
var landrover5 = new Vue({
  el: '#landrover-5',
  data: {
    message: 'Hello Defender'
  },
  methods: {
    reverseDefender: function () {
      this.defender = this.defender.split('').reverse().join('')
    }
  }
})
</script>

<!--output:-->
<!--rednefeD olleH-->