vue event on sfc html element dissapears

I am working on a ElectronJs Project using Electron Forge and the Webpack + Typescript template project

I also installed Vue, and vue-loader for webpack so I could use Single File Component (SFC) file:

  {
    test: /\.vue$/,
    loader: 'vue-loader'
  },

This is all working fine, but now something strange happens: when I add @click or v-on:click in the editor and do 'electron-forge start', this event is missing in the output.

This is the code:

    <button v-for="item in logFilesList?.content"
    class="abc" onmouseleave="alert('hi')" v-on:click="validateAndSubmit('item')"
    >{{ item }}</button>

And this is what I see in the App:

I have added 'abc' so I am certain this is the right piece of code. Also I added onmouseleave and this works.

But why is the v-on:click event missing?

(I am using Volar in VS Code)

This seems to be the webpack output, and the onClick is there:

((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), 
(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"button\", {\n        class: \"abc\",\n        onmouseleave: \"alert('hi')\",\n        
onClick: _cache[0] || (_cache[0] = $event => 
($options.validateAndSubmit(item)))\n      }, 
(0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(item), 1 /* TEXT 
*/))\n

Update

I see now where I went astray, the button wasn't responding and I assumed click event should be there in the button element. And forgot to check the Event-Listeners tab.

You seem to expect

  <button @click="someFn" />

...to output the following HTML markup:

  <button onclick="someFn" />

That would be unnecessary, because Vue handles events ¹ directly, without the need of additional markup.

All events placed in Vue templates are directly turned into actual event listeners at runtime, bound to the element immediately after rendering it. Something akin to:

  <button />
  <script>
    element.addEventListener('click', someFn)
  </script>

... (where element is the actual <button> element), except there's no actual script tag in markup, because Vue has an active JavaScript layer which does everything it needs to, when it needs to.

Note:
To inspect the bound events on an element, in Google Chrome ² right-click the element, select "Inspect", go to "Elements" tab and then go to "Event Listeners" sub-tab in console:

¹ - This is true for both native events and component specific (a.k.a. custom) events (method handlers, emits, watchers)
² - All browsers have similar utilities, the interface might be slightly different.

This is normal, correct behavior.

v-on:click, and similar directives, are specific to the Vue framework. They are not DOM constructs, and they don't get rendered. Template code gets extracted and pre-compiled into JavaScript render functions. This is what allows the directives to still function in the browser while not appearing in the DOM. In the simplest terms, it's all JavaScript by the time it hits your browser.