I have this form

 <template>
<form @submit.prevent="">
<input v-model="objetivo">
<div>
<button @click="adicionarTarefa">adicionar</button>
</div>
</form>
</template>


<script>

import axios from "axios"


export default {

    data() {
        return {
            objetivo : ''
        }
    },

    emits: ['atualizar-lista-tarefas']
,
methods: {
    adicionarTarefa(){

       let data = {
        objetivo: this.objetivo
       }

        axios.post('http://localhost:5243/tarefas', data)

        this.$emit('atualizar-lista-tarefas')
    }
    
}
}
</script>

When a new data is submited I want to refresh the main component, but the atualizarListaTarefas on the App.Vue is never called. App.vue code

<template>
  <FormularioNovaTarefa></FormularioNovaTarefa>

  <div >
    <ItemTarefa v-for="tarefa in tarefas" :key="tarefa.objetivo" :objetivo="tarefa.objetivo"></ItemTarefa>
  </div>
</template>

<script>
import FormularioNovaTarefa from './components/FormularioNovaTarefa.vue'
import ItemTarefa from './components/ItemTarefa.vue'
import axios from "axios"

export default {
  name: 'App',
  components: {
    FormularioNovaTarefa,
    ItemTarefa
  },
  data() {
    return {
      tarefas: [{objetivo: "teste"}, {objetivo : "teste2"}]
      }
  },
 mounted(){
        
        axios.get('http://localhost:5243/tarefas').then(resultado => {
            this.tarefas = resultado.data;

            console.log(resultado.data[0].objetivo)
        })

    },
   methods: {
    atualizarListaTarefas() {
      axios.get('http://localhost:5243/tarefas')
        .then(resultado => {
          this.tarefas = resultado.data;
        })
        .catch(error => {
          console.error("Erro ao buscar tarefas: ", error);
        });
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>