Vue js stop second event - vue.js

Question

I have input with some info.
On blur event or on enter press I want to do some action
But when I press enter my input loses focus and two events are fired one after another-what do I do?
<input v-on:keyup.13.prevent ='save_renamed_group(g)'
#blur.prevent = 'save_renamed_group(g)'>
UPD: I don't consider my question as duplicate of this one:
Prevent both blur and keyup events to fire after pressing enter in a textbox
simply because I want a clear and clean and nice solution to this simple and common stuff and all solutions posted there look like a little bit of hell.

Answer 1

Solution 1: apply debounce on the method.
Debouncing essentially groups your events together and keeps them from
being fired too often. To use it in a Vue component, just wrap the
function you want to call in lodash’s _.debounce function.
https://alligator.io/vuejs/lodash-throttle-debounce/
import { debounce } from 'lodash';
export default {
methods: {
// group all function calls within 100ms together
// no matter how many times this function is called within 100ms, only 1 of them will be executed.
save_renamed_group: debounce(g => {
// ...
}, 100),
},
};
Pros: simple
Cons: delayed function execution
Solution 2: store state of function execution in a variable
export default {
created() {
// create the variable
this.save_renamed_group_running = false;
},
methods: {
save_renamed_group(g) {
// exit if function is already running
if (this.save_renamed_group_running) return;
// set running to true
this.save_renamed_group_running = true;
// .... other logic ...
// set running to false before exiting
this.save_renamed_group_running = false;
return /* something */;
},
},
};
Pros: immediate function execution
Cons: verbose