<div id="app">
  <div class="ring_wrapper">
    <p>父親ブロックあり</p>
    <div class="father" @click="fatherClick">
      <button class="child" @click="childClick">
        呼び鈴
      </button>
    </div>
  </div>
  <div class="fatherBlock ring_wrapper">
    <p>父親ブロックなし</p>
    <div class="father" @click="fatherClick">
      <button class="child" @click.stop="childClick">
        呼び鈴
      </button>
    </div>
  </div>
</div>
#app {
  text-align: center;  
}

.ring_wrapper {
  background-color: #ddd; 
  width: 150px;
  margin: 10px auto;
  padding: 5px;
}

.father, .child, button {
  width: 100%;
  height: 100%;
}
const app = new Vue({
  el: '#app',
  data: {
    text: ''
  },
  methods: {
    childClick() {
      alert('彼女「たかし君!いらっしゃい!」')
    },
    fatherClick() {
      alert('父「うちの子に何か用かい?」')
    }
  }
})
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js