Why is the Vue custom event not firing in the then block?

Question

JavaScript

I want to make a request to the server on a button click, and when a response is received, trigger a custom event and pass it to the parent component:

onAddWordSubmit(){
      this.$emit('change-state', 'loading');

      this.axios.post('http://127.0.0.1:8000/api/v1.0/word/create/', {
        'word': this.word,
        'translate': this.translate,
        'context': this.context
      })
      .then(()=>{
        this.$emit('change-state', 'wordarea');
      });

The problem is that the event does not fire in the then block. this is the vue component i.e. context is ok. If you pull this line out of the function, then it works fine (but asynchronously, without waiting for a response). What could be the issue here?
For a complete picture, here is a link to the github: https://github.com/kkomissarov/anki
This problem is in the src/components/AddWordComponent.vue block

Answer 1

You use a dynamic component, initially you render a wordarea, when you send a request you switch the dynamic component to another one, at this moment your wordarea component is destroyed and a loading component is created in its place, and accordingly, after the wordarea is destroyed, all signed events are unbind and in fact you are trying get the 'change-state' event already at the loading component
You can try to wrap it in keep-alive and the components will not be deleted when switching

<keep-alive>
<component
  v-bind:is="currentComponent"
  v-on:change-state="changeState($event)">
</component>
<keep-alive>