Why doesn't the data in the Vue template change?

Question

JavaScript

<template>
    <section class="messages">
        <div class="message">{{ message }}</div>
    </section>
</template>

<script>
export default {
    data: () => ({
        message: 'mess'
    }),
    beforeCreate () {
        this.$root.$on('msg', function (message) {
            this.message = message
        })
    }
}
</script>

When this.$root.$emit('msg', message)in the Messages component, the transmitted message is read and successfully written to data. But the template doesn't change. What the hell is the problem?

Answer 1

<template>
    <section class="messages">
        <div class="message">{{ message }}</div>
    </section>
</template>

<script>
export default {
    data: () => ({
        message: ''
    }),
    beforeCreate () {
        this.$root.$on('msg', message => {
            this.message = message
        })
        
    }
}
</script>

Answer 2

Maybe it's still like that?

data() {
  return {
        message: 'mess'
    };
},