Javascript-форум - Не всплывает событие в Vue

Привет.
Как понять такую логику, что внутри компонента blog-post генерируется событие:

<button v-on:click="$emit('enlarge-text')"

Но до верхнего компонента оно само не поднимется.

Надо обязательно НА НЕМ же и ловить и отправлять выше

<blog-post v-bind:title="title" v-on:enlarge-text="methodClick1" />
  methods: {
	methodClick1: function(){
		this.$emit('enlarge-text');
	}
  }

Чем такая логика может быть объяснена?

Вот полный код:

<!DOCTYPE html>
<html>
<head>
		     
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<script src="resources/vue/vue.js"></script>

<style>
table, th, td {
  border: 1px solid black;
}
</style>

</head>
<body>
<div id="app">
	<div v-bind:style="{ fontSize: postFontSize + 'em' }">
	<main-content :title="title" v-on:enlarge-text="postFontSize += 0.1"></main-content>
	</div>
</div>


</body>
<script>

Vue.component('blog-post', {
  props: ['title'],
  template: 
`<div>
  <h3>{{ title }}</h3>
  <button v-on:click="methodConsole">Консоль</button>
  <button v-on:click="$emit('enlarge-text')">Увеличить размер текста</button>
  
</div>`,
  data: function(){
	return {
		
	};
  },
  methods: {
	methodConsole: function(){
		console.log(this.title);
		console.log(this);
	}
  }
}) 

Vue.component('main-content', {
	props: ['title', 'prop2'],
  template: 
`<div>
  
  <blog-post v-bind:title="title" v-on:enlarge-text="methodClick1" />
  <!-- просто нельзя оставить 
  <blog-post v-bind:title="title" />
  -->
</div>`,
  methods: {
	methodClick1: function(){
		//console.log(this.title);
		//console.log(this);
		this.$emit('enlarge-text');
	}
  }	
});

  
var app =  new Vue({
    el: "#app",
    components: {},
    data() {
      return {
        postFontSize: 1,
		title: 'my title 2',
      }
    },
	methods: {
		reduceText: function($event) {
			this.postFontSize -= $event;
		}
	}
  });
</script>
</html>