Vue 3 SVG Listeners

HTML

<script src="https://unpkg.com/vue@3.0.0-rc.5/dist/vue.global.js"></script>
<div id="app" ref="div">
  <button @click="reset">
  reset
  </button>
  Clicked {{count}}
  <svg style="width: 100%; height: 100%;">
    <text @onclick="increment" x="10" y="10"  >@onclick</text>
    <text v-on:onclick="increment" x="10" dy="30"  >v-on:click</text>
    <text ref="right" x="10" dy="50" >javascript onclick</text>
    <text ref="wrong" x="10" dy="70"  >javascript onEventListener</text>
    <text x="10" dy="90" :onclick="increment">:onclick</text>
  </svg>
</div>

JavaScript

const app = Vue.createApp({
  data () {
    return {
      count: 0,
    }
  },

  mounted () {
    this.$refs.right.onclick = this.increment
    this.$refs.wrong.addEventListener("onclick", this.increment)
  },

  methods: {
    increment () {
      this.count++
    },
    reset () {
      this.count = 0
    }
  }
})

app.mount('#app')