Which vue.js lifecycle hook should I hang another component's event handling on?

Question

Vue.js

Good day!
There is a search field with a dropdown list that appears as a result of field autocompletion, this works.
Task: when clicking on any free space, that is, on the parent component, close (hide) the list, that is, the child component.
Events are processed through a common bus.
When clicking on a free space, the event is correctly generated.
In parent component:

methods: {
    searchClose: function() {
      console.log('Клик') // Это срабатывает
      bus.$emit("searchclose"); // Это тоже срабатывает
    }
  }

But it is not clear on which hook of the list you can hang the handler?
I tried both created() and mounted() but it doesn't work.
In child component:

created() {
    bus.$on('searchlose', function() {
      this.searchList = false;
    })
  },

What am I doing wrong?
Sincerely.

Answer 1

You have a typo in your code, but in general, in this case, the "child component" itself usually contains an absolutely positioned full-screen watermark, which is shown when necessary (for example:

position: absolute; 
top: 0;
left: 0;
z-index: 1000;
width: 100%;
height: 100%;

) on click on which the closing of the pop-up content component is hung up, the necessary z-index is set for the "pop-up content" component itself so that it is not covered by the background.
So that the component is entirely responsible for its interface functions.