Vue挂载点的click事件无效

本来是在学习事件修饰符
实操时发现如这样的写法是无法触发father节点的click事件的:

<body>
    <div id="father" @click="alertFather"  >
          father
          <div id="son" @click="alertChild">
            son
          </div>
      </div>
    <script>
        const msg={
            methods: {
              alertChild(){
                alert("child")
              },
              alertFather(){
                alert("Father")
              }
            }
        }
        Vue.createApp(msg).mount("#father")
    </script>
</body>

点击外层没有触发事件,点击内层只会调用一次alertChild。
打开控制台发现<div id="father" @click="alertFather" >并没有被vue渲染

假如我再嵌套一层div,将外层的click事件放在中间层的div上,就可以正常运行:

<body>
    <div id="father"   >
      <div @click="alertFather">
          father
          <div id="son" @click="alertChild">
            son
          </div>
      </div>
    </div>
    <script>
        const msg={
            methods: {
              alertChild(){
                alert("child")
              },
              alertFather(){
                alert("Father")
              }
            }
        }
        Vue.createApp(msg).mount("#father")
    </script>
</body>

似乎不能再挂载点添加事件,这是为什么?

加个.stop