How to reorder events (@click, @blur) in Vue.JS?

Question

JavaScript

There is a block in the Vue component:

<div @focus="show" @blur="hide" contenteditable>
  ...
</div>

The show function shows one element (it is NOT a child), and hide hides it. This element has a function that is called on click:

<div @click="myFunc">
  ...
</div>

So, if you click on this element, the myFunc function should be called , but the hide function is called first due to the fact that the focus disappears from the main block, then the desired element is hidden and the myFunc function is not called.
How can I change the order of events, or do something else, so that the myFunc function is still called when the element is clicked?

Answer 1

Question: how can focus / blur work on your div? And if the element that is being clicked is inside the element and it cannot be focused on (and div is like that), the focus from the parent will not fall off. Make some condition in hide, so that such closing does not happen.

Answer 2

Do it with a small setTimeout.