Javascript Vue.js，附加@click on g元素

我正在尝试使用以下组件

<template>
    <g transform="translate(50,-85) scale(0.3,-0.3)">
    <path  style=" fill:lightblue;" d="M 39.601563 27.199219 C 39.699219 26.5 39.800781 25.800781 39.800781 25 C 39.800781 24.199219 39.699219 23.5 39.601563 22.800781 L 44.101563 19.601563 C 44.5 19.300781 44.699219 18.699219 44.398438 18.199219 L 40 10.800781 C 39.699219 10.300781 39.199219 10.101563 38.699219 10.398438 L 33.699219 12.699219 C 32.5 11.800781 31.300781 11.101563 29.898438 10.5 L 29.398438 5 C 29.300781 4.5 28.898438 4.101563 28.398438 4.101563 L 19.800781 4.101563 C 19.300781 4.101563 18.800781 4.5 18.800781 5 L 18.300781 10.5 C 16.898438 11.101563 15.601563 11.800781 14.5 12.699219 L 9.5 10.398438 C 9 10.199219 8.398438 10.398438 8.199219 10.800781 L 3.898438 18.199219 C 3.601563 18.699219 3.800781 19.300781 4.199219 19.601563 L 8.699219 22.800781 C 8.601563 23.5 8.5 24.199219 8.5 25 C 8.5 25.800781 8.601563 26.5 8.699219 27.199219 L 4 30.398438 C 3.601563 30.699219 3.398438 31.300781 3.699219 31.800781 L 8 39.199219 C 8.300781 39.699219 8.800781 39.898438 9.300781 39.601563 L 14.300781 37.300781 C 15.5 38.199219 16.699219 38.898438 18.101563 39.5 L 18.601563 45 C 18.699219 45.5 19.101563 45.898438 19.601563 45.898438 L 28.199219 45.898438 C 28.699219 45.898438 29.199219 45.5 29.199219 45 L 29.699219 39.5 C 31.101563 38.898438 32.398438 38.199219 33.5 37.300781 L 38.5 39.601563 C 39 39.800781 39.601563 39.601563 39.800781 39.199219 L 44.101563 31.800781 C 44.398438 31.300781 44.199219 30.699219 43.800781 30.398438 Z M 24 35 C 18.5 35 14 30.5 14 25 C 14 19.5 18.5 15 24 15 C 29.5 15 34 19.5 34 25 C 34 30.5 29.5 35 24 35 Z "/>
    <path  style=" fill:lightblue;" d="M 24 13 C 17.398438 13 12 18.398438 12 25 C 12 31.601563 17.398438 37 24 37 C 30.601563 37 36 31.601563 36 25 C 36 18.398438 30.601563 13 24 13 Z M 24 30 C 21.199219 30 19 27.800781 19 25 C 19 22.199219 21.199219 20 24 20 C 26.800781 20 29 22.199219 29 25 C 29 27.800781 26.800781 30 24 30 Z "/>
    </g>
</template>

在另一个组件中作为设置，但在这样做时@click事件不起作用，可能是因为上面的组件引入了一个g元素。而且@click对g元素不起作用

<g class="step">
  <settings @click="showThat"></settings>
  <text :transform="_nameTransform" class="name">{{name}}</text>
  <text :transform="_temperatureTransform">{{temperature}}</text>
  <text :transform="_durationTransform">{{duration}}</text>
  <text :transform="_rateTransform">{{rate}}</text>
  <camera v-if="collectOnHold" :transform="_collectHoldTransform" :enabled="collectEnabled" ></camera>
  <camera v-else :transform="_collectRampTransform" :enabled="collectEnabled" ></camera>
</g>

{{name}}
{{温度}}
{{duration}}
{{rate}}

我试图在div中对组件进行分组，但由于所有这些都包含在svg元素中，因此在div中包装组件不起作用。是否有一种方法可以包含该组件并能够在其上附加@click处理程序函数

 <template>
<div>
            <g transform="translate(50,-85) scale(0.3,-0.3)">
            <path  style=" fill:lightblue;" d="M 39.601563 27.199219 C 39.699219 26.5 39.800781 25.800781 39.800781 25 C 39.800781 24.199219 39.699219 23.5 39.601563 22.800781 L 44.101563 19.601563 C 44.5 19.300781 44.699219 18.699219 44.398438 18.199219 L 40 10.800781 C 39.699219 10.300781 39.199219 10.101563 38.699219 10.398438 L 33.699219 12.699219 C 32.5 11.800781 31.300781 11.101563 29.898438 10.5 L 29.398438 5 C 29.300781 4.5 28.898438 4.101563 28.398438 4.101563 L 19.800781 4.101563 C 19.300781 4.101563 18.800781 4.5 18.800781 5 L 18.300781 10.5 C 16.898438 11.101563 15.601563 11.800781 14.5 12.699219 L 9.5 10.398438 C 9 10.199219 8.398438 10.398438 8.199219 10.800781 L 3.898438 18.199219 C 3.601563 18.699219 3.800781 19.300781 4.199219 19.601563 L 8.699219 22.800781 C 8.601563 23.5 8.5 24.199219 8.5 25 C 8.5 25.800781 8.601563 26.5 8.699219 27.199219 L 4 30.398438 C 3.601563 30.699219 3.398438 31.300781 3.699219 31.800781 L 8 39.199219 C 8.300781 39.699219 8.800781 39.898438 9.300781 39.601563 L 14.300781 37.300781 C 15.5 38.199219 16.699219 38.898438 18.101563 39.5 L 18.601563 45 C 18.699219 45.5 19.101563 45.898438 19.601563 45.898438 L 28.199219 45.898438 C 28.699219 45.898438 29.199219 45.5 29.199219 45 L 29.699219 39.5 C 31.101563 38.898438 32.398438 38.199219 33.5 37.300781 L 38.5 39.601563 C 39 39.800781 39.601563 39.601563 39.800781 39.199219 L 44.101563 31.800781 C 44.398438 31.300781 44.199219 30.699219 43.800781 30.398438 Z M 24 35 C 18.5 35 14 30.5 14 25 C 14 19.5 18.5 15 24 15 C 29.5 15 34 19.5 34 25 C 34 30.5 29.5 35 24 35 Z "/>
            <path  style=" fill:lightblue;" d="M 24 13 C 17.398438 13 12 18.398438 12 25 C 12 31.601563 17.398438 37 24 37 C 30.601563 37 36 31.601563 36 25 C 36 18.398438 30.601563 13 24 13 Z M 24 30 C 21.199219 30 19 27.800781 19 25 C 19 22.199219 21.199219 20 24 20 C 26.800781 20 29 22.199219 29 25 C 29 27.800781 26.800781 30 24 30 Z "/>
            </g>
 </div>
</template>

..
？@JacobGoh编辑了这个问题，谢谢你指出。
是一个空元素，不能触发点击事件：谢谢@Terry，我确实读了那篇文章。然后，你可以简单地创建一个虚拟覆盖元素，而不是将它包装在
中（它不是
的有效子元素），就像
，并将click事件处理程序附加到它。