VueJs: cheeky bug?

Question

Vue.js

Good afternoon everyone!
Guys help me solve the puzzle. I write a select, everything turns out, everything is cool, but there is one point: the
select should work like this: when you click on the field (input), the list opens, when you click on the option, the value is selected and the list closes. So when I inserted the clear button, a funny bug appeared, not at all predictable ...
There are two v-if="value && !isOpen" in .app-select-search, for span and for button, because of them after selecting the value in the select, the list no longer
appears when the input is focused, in addition, another "close" event is added (you can see it in the console) works great, everything reopens.
If you move the input after the button also works,
At first I thought that it was about focuses, because due to the specifics, there is focus on both the input and the root element. But after moving the input after the clear button or vice versa, everything works, I just stop thinking logically at all ...
Please help me figure it out.
https://codesandbox.io/s/7ww75nn171
Vue Template - CodeSandbox
The online code editor tailored for web applications