how can I make the click event be executed first before the focusout event is executed?

Basically in a real example of my code I have this problem:
when i start typing in a text field, it is shown a modal (in my case a div) and i want that when I click on this div, i want the click event to be executed.
The idea is that this div disappears when I click outside the text field.

I understand that first the @focusout is executed when I click outside of the input search, before the @click event is executed.

How can I fix this? in my web page I can have several other HTML elements and when the user clicks on any other element I need the @focusout to be executed when previously typed in the text field and not would be a good practice put in each element different to my input text a myInputText.blur() event for example.

new Vue({
  el: '#app',
  methods: {
    clickEvent() {
      console.log('click');
    },
    blurEvent() {
      console.log('focusout');
      this.myText="";
    },
  },
  data() {
    return {
      myText: ''
    };
  },
})

<div id="app">
    <div class="hello">
      <input  v-model="myText" @focusout="blurEvent" placeholder="write something">
      <div style="cursor:pointer;border:1px solid red; position:fixed; right:50%; top:0px;" v-if="myText"       @click="clickEvent">Select on option</div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.10/vue.min.js"></script>