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

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?