Variable is empty in child component, VueJs

Question

When an event is triggered, I call a function that fills a variable and opens a modal from a child component. But, there, my new variable is empty, and if I close/re-open modal I have the data, so the data is loaded after.

I tried to load that child component after I have data, but no good till now.

Parent

  <p class="open-modal-button" @click="openUpdatesModal">
     <i class="fas fa-sync"></i>
     Check for updates
  </p>

  <check-for-updates-modal
    v-if="check_for_updates_values.account_name != ''"
    :modalUpdatesOpen="modalUpdatesOpen"
    :check_for_updates_values="check_for_updates_values"
  />

  data() {
    return {
      //code....
      check_for_updates_values: [],
      modalUpdatesOpen: false,
    };
  }

openUpdatesModal() {
  this.temporaryChecker();
},

temporaryChecker() {
  this.check_for_updates_values.account_name = this.account_name;
  this.check_for_updates_values.company_registration_number = this.company_registration_number;
  this.check_for_updates_values.registered_address = this.registered_address;

  this.modalUpdatesOpen = !this.modalUpdatesOpen;
},

Child

<b-col>{{check_for_updates_values.account_name}}</b-col>

  props: [
    "modalUpdatesOpen",
    "check_for_updates_values",
  ],

  watch: {
    modalUpdatesOpen() {
      this.checkForChanges();
      this.$bvModal.show("modal-check-for-updates");
    },
  },

Answer 1

If you really initialize check_for_updates_values as an array, this is the problem. According to your usage, it should be an object.

Also, be careful to explicitly initialize every existing key on the object, or Vue won't be able to register them for reactivity watchers! That means if you have a data object empty foo: {}, any time you add a property, it won't refresh the vue foo.label = 'test' // won't render properly.

data() {
   return {
      check_for_updates_values: {
         account_name: null,
         company_registration_number: null,
         registered_address: null,
      },
   };
}