Why the Vue3 button click event did not trigger it's event handler

Issue

I've defined the trigger event in google chrome extension with Vue3 like this:

<template>
  <div id="reddwarf-translate-app">
    <div id="translate-btn">
      <button type="button" class="translate-pop-button" @click="translate">
        <span class="reddwarf-btn-icon"></span>
      </button>
        <button v-on:click="add">Add 1</button>

    </div>
    <div id="pop-container">
      <div id="translate-panel">
        <div class="header"></div>
        <div class="body"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { doTranslate } from "@/public/action/TransAction";
import { MessageType } from "@/model/message/MessageType";
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    word: String,
  },
  setup(props) {
    if (props && props.word && props.word.trim().length > 0) {
      
    }
  },
  methods:{
    translate(){
      alert("do translate");
      const transWord = computed(() => getters["Trans/getTransWord"])
      if (transWord && transWord.value && transWord.value.trim().length > 0) {
        doTranslate(transWord.value.trim(),MessageType.SELECTION_TRANSLATE);
      }
    },
    add(){
      alert("do add");
    }
  }
});
</script>

When I clicked the two type of button, both did not trigger events(both function did not show alert message), why did this happened? Am I missing something? what should I do to make the trigger events work? I've tried to make a minimal example with the same code block, it works fine. I think maybe it's the google chrome extension environment problem. I've loaded this component in google chrome extension v3 script like this:

export async function addTransShowElement(translation:string){
  let anchorElementId = "uniq-anchor-point";
  let anchorElement = document.getElementById(anchorElementId);
  if (anchorElement == null || anchorElement === undefined) {
    let reddwarfTranslateDiv = document.createElement("div");
    reddwarfTranslateDiv.id = anchorElementId;
    document.body.appendChild(reddwarfTranslateDiv);
  }
  let appElement = document.getElementById("reddwarf-translate-app");
  if (appElement == null || appElement === undefined) {
    let props = {
      word: translation.toString().trim(),
    };
    const app = createApp(TranslatorPop, props);
    app.use(store);
    let vm = app.mount("#uniq-anchor-point");
    document.body.appendChild(vm.$el);
  }
}

TranslatorPop was the component I am defined. I have tried another way like this:

setup(props) {
    const add = () => {
      alert("do add");
    }
    
    return(
      add
    );
  },

This way it works fine. Why put the function setup works but in methods did not work?

Solution

You are mixing Options API (methods) and Composition API (setup), stick to one that suits your need. In Composition API you define the methods in the setup as you did in the last code snippet and this is how it works. If you want to use Options API, don't define setup, but data and methods:
https://v3.vuejs.org/guide/composition-api-introduction.html#basics-of-composition-api
vs.
https://v3.vuejs.org/guide/data-methods.html#data-properties

Answered By - Thomas