Vue.js Обновление данных дочерних компонентов из родительского

Question

Как я могу обновить данные в дочернем компоненте из родительского компонента? Я пытаюсь обновить свойство autores изнутри родительского объекта, чтобы обновить дочерние данные. В настоящее время ничего не происходит, я не думаю, что данные правильно связаны. Если я добавлю его в качестве данных в родительский компонент, то родительский объект будет визуализироваться повторно при выполнении кода, и результаты не будут видны.

Родитель:

<template>
    <div>
        <input @keyup="editName(lender.id, $event)">

            <autocomplete-suggestions :autores="[]"></autocomplete-suggestions>

    </div>
</template>

<script type="text/javascript">
    export default {
        props: ['lender'],

        data(){
            return {

            }
        },

        methods: {
            editName: function(lenderid, event) {

                var self = this;

                    axios.post('/lenders/autocomplete', {...})
                        .then(function (data) {

                            self.autores = data.data.suggestions;

                        })
                        .catch(function (error) {
                            console.log("Error occurred getting the autocomplete");
                        });


            },
        },
        watch: {

        },
        mounted: function() {

        }
    };
</script>

Ребенок:

<template>
    <div class="list">
        <div v-for="(res, i) in autores">{{res}}</div>
    </div>
</template>

<script type="text/javascript">
    export default {
        props: ['autores'],
        data(){
            return {

            }
        }
    };
</script>

Обновление:

Если я изменю свой код в родительском на:

data(){
    return {
        autores:[]
    }
},

и

<autocomplete-suggestions :autores="autores"></autocomplete-suggestions>

Тогда просто всякий раз, когда я обновляю this.autores, любой текст, который был введен в текстовое поле в родительском элементе при сбросе, как если бы он перерисовывал весь компонент. Как это можно остановить?

Answer 1

Родитель:

<template>
  <div>
    <input @keyup="editName(lender.id, $event)">
    <autocomplete-suggestions ref="autocompleteSuggestions"></autocomplete-suggestions>
  </div>
</template>

<script type="text/javascript">
  export default {
    props: ['lender'],
    methods: {
      editName: function (lenderid, event) {
        var self = this;
        axios.post('/lenders/autocomplete', {...})
          .then(function (data) {
            self.$refs.autocompleteSuggestions.autores = data.data.suggestions;
          })
          .catch(function (error) {
            console.log("Error occurred getting the autocomplete");
          });
      },
    },
  };
</script>

Ребенок:

<template>
  <div className="list">
    <div v-for="(res, i) in autores">{{res}}</div>
  </div>
</template>

<script type="text/javascript">
export default {
  data() {
    return {
      autores: []
    };
  },
};
</script>