<div id="localizacao">
    <div class="europa" @click="mostraLocal($event)" title="Europa">
        <div class="inglaterra" @click="mostraLocal($event)" title="Inglaterra">
            <div class="londres" @click="mostraLocal($event)" title="Londres">
                <div class="baker-street" title="Baker St.">
                </div>
            </div>
        </div>
    </div>
</div>

baseColor = red
activeColor = blue

*
  padding 0
  margin 0
  
#localizacao
  margin 30px
  cursor pointer
  text-align center
  
  div
    display inline-block
    border-radius 50%
    padding 30px

.europa
  background lighten(baseColor, 80%)
  &.ativo
    background lighten(activeColor, 80%)

.inglaterra
  background lighten(baseColor, 60%)
  &.ativo
    background lighten(activeColor, 60%)

.londres
  background lighten(baseColor, 40%)
  &.ativo
    background lighten(activeColor, 40%)

.baker-street
  width 50px
  height 50px
  background baseColor
  &:active
    background activeColor

new Vue({
    el: '#localizacao',
    methods: {
        mostraLocal: function (event) {
          const currentTarget = event.currentTarget;
 
          currentTarget.classList.add('ativo');
          setTimeout(() => {
            currentTarget.classList.remove('ativo');
          }, 1000);
          
          console.log('target >', event.target.title, 'currentTarget >', event.currentTarget.title);
        }
    }
});