在vue中methods 中写 拼接html 元素 @click 不起作用问题 ，给指定文字加样式

实现效果，指定文字变红，点击红色文字，弹出窗口

html

<div v-html='text'  ></div>

// 首先要把调用的方法 赋值到window上

 created() {
           
    window.ale=this.ale;   

}，

 methods: {

querysour(e){
           let replaceStr;
           e=e.replace(/(^\s*)|(\s*$)/g, "");//先过滤掉字符串中的空格
            //用test函数判断字符串中有没有定义的特殊字符
            if (/[\\^$.*+?()[\]{}|]/g.test(e)) {
                     //把匹配到的特殊字符替换成'',再加上原来的字符
                     e= e.replace(/[\\^$.*+?()[\]{}|]/g, "/"+e.match(/[\\^$.*+?()[\]{}|]/g)[0]);
              };
               let ii= '我们是中国'
                replaceStr = new RegExp(e,'img');
                            
                     let i= ii.replace(replaceStr,  _ => '<span style="color:red;" οnclick="ale()">' + _ + '</span>');  
                        this.text = i
   },
  ale(){
         alert('点击我们了')
   }

}