Difference from #event="doThis()" & #event="doThis" in Vuejs - vue.js

Question

I've encountered this error
Cannot read property 'target' of undefined
with an #click event while calling a method with a doThis().
But doThis worked fine
I would like to know what is the difference between
<button type="button" #click="doThis()" data-name="test">Test</button>
And
<button type="button" #click="doThis" data-name="test">Test</button>
with this method
methods: {
doThis(e) {
console.log(e.target.dataset.name);
}
}

Answer 1

Because the e which is the event object being handled is is undefined. You have to pass the object using global $event
<button type="button" #click="doThis($event)" data-name="test">Test</button>
Usually when you invoke the event handler manually is because you need to pass additional arguments to the function. As example
<div v-for="v in values" :key="v.id">
<button type="button" #click="doThis($event, v)" data-name="test">Test</button>
</div>

Answer 2

As I was typing this up, #Chay22 was able to help - for what it's worth, here is an example:
[CodePen Mirror]
const vm = new Vue({
el: "#app",
data: {
title: ''
},
methods: {
doTheNeedful(e) {
this.title = "Coming From: " + e.target.innerHTML;
console.log(e);
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<div id="app">
<div>
<button #click="doTheNeedful">doTheNeedful</button>
<button #click="doTheNeedful($event)">doTheNeedful($event)</button>
<div v-if="title">
<p>{{ title }}</p>
<h3>Check console for event info</h3>
</div>
</div>
</div>