尚不知道

尝试失败，没有成功。
把这段代码放到component的HelloWorld.vue里了，没有成功

<!--
 * @,@Author: ,: your name
 * @,@Date: ,: 2021-04-02 09:52:24
 * @,@LastEditTime: ,: 2021-04-02 09:58:40
 * @,@LastEditors: ,: Please set LastEditors
 * @,@Description: ,: In User Settings Edit
 * @,@FilePath: ,: /hami35/src/components/HelloWorld.vue
 -->
<template>
<div id="event-handling">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">反转 Message</button>
</div>
</template>

<script setup>
import { defineProps, reactive } from 'vue'

const EventHandling = {
  data() {
    return {
      message: 'Hello Vue.js!'
    }
  },
  methods: {
    reverseMessage() {
      this.message = this.message
        .split('')
        .reverse()
        .join('')
    }
  }
}

Vue.createApp(EventHandling).mount('#event-handling')
</script>

<style scoped>
a {
  color: #42b983;
}
</style>

为什么呢，应该怎么改的？