Unable to set the property in Vuejs

Question

I am facing a strange issue. The issue is I am trying to update a property but I am receiving an error. The error is as follows:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler: "TypeError: Cannot set property 'message' of undefined"

found in

---> <App> at src/App.vue
       <Root>
warn @ vue.runtime.esm.js?2b0e:619
logError @ vue.runtime.esm.js?2b0e:1884
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1862
invoker @ vue.runtime.esm.js?2b0e:2179
original._wrapper @ vue.runtime.esm.js?2b0e:6911
vue.runtime.esm.js?2b0e:1888 TypeError: Cannot set property 'message' of undefined
    at VueComponent.recognize (App.vue?234e:42)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at HTMLButtonElement.invoker (vue.runtime.esm.js?2b0e:2179)
    at HTMLButtonElement.original._wrapper (vue.runtime.esm.js?2b0e:6911)

My App.vue looks something like this.

<template>
  <div id="app">
    <button v-on:click="recognize">recognize</button>
    <textarea v-model="message" placeholder="add multiple lines"></textarea>
  </div>
</template>

<script>

export default {
  name: 'app',
  data: function() {
    return {
      message: 'Hello!'
    };   
  },
  created: function () {
    // Here it prints the this.message without issue.
    console.log('a is: ' + this.message)
  },
  methods: {
    recognize: () => {
      this.message = "123 test"
    }
  }
}
</script>

I did check the message property using the created lifecycle event. I am able to access the this.message in the created lifecycle event. But the issue arises when I use it in the method recognize. Here it is unable to find my declared variable.

Any help or guidance will be appreciated.

Thank you.