<div id="app">
  <!-- clicking on any box will cause an alert -->
  <div class="box white" @click="alert">
    <h4 class="text-center">no .self</h4>
    <div class="box red"></div>
    <div class="box blue"></div>
  </div>
  
  <!-- Clicking only on the white box will cause an alert -->
  <div class="box white" @click.self="alert">
    <h4 class="text-center">.self</h4>
    <div class="box red"></div>
    <div class="box blue"></div>
  </div>
</div>

html, body {
  display: grid;
  justify-content: center;
  align-content: center;
  width: 100%;
  height: 100%;
}

#app {
  display: flex;
}

.box {
  display: grid;
  justify-content: center;
  align-content: center;
  padding: 25px;
  margin: 10px;
  
  min-width: 100px;
  min-height: 100px;
  
  border: 2px solid #999;
  background-color: #fff;
}

.red {
  background-color: indianred;
}

.blue {
  background-color: cadetblue;
}

const app = Vue.createApp({
  methods: {
    alert: function () {
      alert('Clicked!')
    }
  }
})

const vm = app.mount('#app')