Vue事件从组件点击

Question

从下面的代码中，我想在单击标记元素h1时更新“名字”值：

<template>
<div>

    <h1 @click="reverseMessage"> Hello {{person.firstname}} {{message}} </h1>
    <label>Firstname : <input type="text" v-model="person.firstname"></label>
    <label>Message : <input type="text" v-model="message"></label>
</div>

</template>
<script>
    export default {

        data(){
        return {
            person:{
                firstname:'haja'
            },
            message:'hello'
        }
    },
    methods:{
        reverseMessage:function(){
            console.log(this.person.firstname.split('').reverse().join( '' ))
            this.person.firstname.split('').reverse().join();
        }
    }
}

resverseMessage方法中的控制台运行良好，但这不能反映模板中的值。

有什么主意吗？

谢谢