Vue method showing as undefined

I’m trying to trigger an event on button click but this code which I expect to work isn’t working.

I thought it was because I had no value in the data section initially so added data to allow the component to be reactive. That didn’t do anything so I have no idea what to try next.

Code

<template>
  <div>
    <button @click="liveChatTrigger">{{ text }}</button>
  </div>
</template>

<script>
export default {
  name: "LiveChatButton",
  method: {
    liveChatTrigger() {
      alert('trigger')
    }
  },
  data() {
    return {
      text: 'Start a live chat now'
    }
  }
}
</script>

Error

[Vue warn]: Property or method "liveChatTrigger" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

[Vue warn]: Invalid handler for event "click": got undefined

(found in <Root>)

>Solution :

You have defined the function in the method property. It should be methods.