Vue Click Handling

Vue click handling with regards to bubbling and capturing

HTML

<script src="https://unpkg.com/vue"></script>
<div class="outer"
     v-on:click.capture="doThis($event, 'Capture')"
     v-on:click="doThis($event, 'Bubble')">
  OUTER
  <div class="middle"
       v-on:click.capture="doThis($event, 'Capture')"
       v-on:click="doThis($event, 'Bubble')">
    MIDDLE
      <div class="inner"
           v-on:click.capture="doThis($event, 'Capture')"
           v-on:click="doThis($event, 'Bubble')">
        INNER
      </div>
  </div>
</div>

CSS

body * {
  margin: 10px;
  border: 1px solid blue;
}

JavaScript

new Vue({
  el: '.outer',
  data: {
  },
  methods: {
    doThis: function(e, msg) {
      debugger;
      var target = e.target.classList[0];
      var currentTarget = e.currentTarget.classList[0];
      alert(msg + '\n' + "Clicked " + target + '\n' + "Triggered " + currentTarget)
    }
  }
})