Данные не обновляются от дочернего компонента к родительскому

Question

У меня есть дочерний компонент, который я добавляю в ссылки.После завершения я вызываю родительский компонент для получения новых ссылок.

Мои ссылки в v-for не обновляются.Они обновляются только когда я перезагружаю страницу с новой записью.После отправки я хочу, чтобы мой дочерний компонент уведомлял / вызывал функцию родителей fetchLinks для обновления всех ссылок на экране (которые не обновляются, если я не обновляю страницу)

Это функция успеха формы от ChildAddLinksComponent

// Get the new updated subscriptions 
this.$parent.fetchLinks()

Родительский компонент

<div class="card card-body" v-for="link in links" v-bind:key="link.id">
   <h2>{{ link.name }}</h2>
</div>

      <add-links></add-links>


export default {
    data() {
        return {
            links: [],
        }
    },
    components: {
       'add-links': AddLinksComponent,
    },
    methods: {
        fetchLinks() {

            fetch('/links/')
            .then(res => res.json())
            .then(res => {
                this.links = res.data
            }).catch(err => {
                console.log('Error', err)
            });
        }
    },
    created() {
        this.fetchLinks();
    },
    mounted() {

    }
}

Answer 1

В дочернем компоненте попробуйте отправить событие родительскому компоненту, когда задача будет выполнена следующим образом:

 this.$emit('fetch');

в родительском компоненте:

 <add-links @fetch="fetchLinks"></add-links>