javascript - Vue.js parent component event handler method can't access it's own data normally -

bare me, difficult explain.

what's happening in brief

in parent component, passing array child component, , when user selects 1 of elements of array, child component emits event, passing selected item, handled in parent. want take selected element (in event handler of parent), , push onto different array in parent. able access/console.log object being passed during emission in parent's event-handling method, this.currentlyselectedadvertisements (<--- empty array want start filling up) somehow no longer array!

when console.log(this.currentlyselectedadvertisements) (as shown below) console tells me it's __ob__: observer <--- that? why it, property defined array, unusable when need mutate in event handler , alter how children rendered? oddly enough, in template, if put {{currentlyselectedadvertisements}} shows empty array []. also, in event handling method of parent, if use [].push.call(this.currentlyselectedadvertsiements, payload.chosen), able not error. however, cannot seem iterate through this.currentlyselectedadvertisements , effect how children rendered. i'm quite confounded this, did go wrong? pretty new vue.js, , second project have used on. please me reach enlightenment/understanding.

full info code samples

i have parent component has array in it's data attribute so

// **** parent component js **** import advertisement './advertisement.vue';  export default {   name: 'column2',   data() {     return {       columns: 2,       currentlyselectedadvertisements: [] // <--- defined array     };   },   props: {      adpool: array,     positions: array   },   components: {     'advertisement': advertisement,   },   methods: {     handleselection(payload) { // <--- event handler method        console.log("in column2 component , advert selected ", payload);       // this.currentlyselectedadvertisements.push(payload.chosen);        console.log(this.currentlyselectedadvertisements);        //  right here ^ shows '__ob__: observer' in console ****      }   } }; 

i using array render child component advertisement (here template section)

<!-- *** parent component template rendering child components *** --> <template>    <div class="column2">       <div v-for="(ad, index) in currentlyselectedadvertisements" class="column2__column">          <advertisement :position="positions[index]" :adpool="adpool" :image="ad.image"></advertisement>       </div>       <div v-for="i in (columns - currentlyselectedadvertisements.length)" class="column2__column column2__column--dashed">           <advertisement @advertisement-selected="handleselection" :position="positions[i-1]" :adpool="adpool"></advertisement>       <!-- here listener ^ ****** -->        </div>    </div> </template> 

now in child component have select element renders user's choices pick (here part of template)

 <!-- *** child component template *** -->  <div class="advertisement__chooser">      <select v-model="selected" @change="advertisementselected(selected)" :name="ad_position">       <!-- here change listener ^ when user picks option ***** -->        <option value="">please choose</option>       <option v-for="ad in adpool" :data-img="ad.image" :value="ad.id">{{ad.name}}</option>     </select>   </div> 

and here methods find selected item, , emit event parent listen to

 // *** part of child component js ***  methods: {    advertisementselected(id, event) { // <--- event handler in child      var chosen_advert = this.findadbyid(id);     var event_payload = {};     if ( chosen_advert ) {       event_payload = {         position: this.ad_position,         chosen: chosen_advert       };       console.log('in advertisement.vue ', event_payload);        this.$emit('advertisement-selected', event_payload);        // , here ^ emission of event ******      }   },   findadbyid(id) {     ( var in this.adpool ) {       if ( this.adpool[i].id === id ) {         return this.adpool[i];       }     }     return -1;   } } 

here screenshot of console.log(this.currentlyselectedadvertisements) in parent's event handler screenshot

okay, in end, somehow resolved itself.... went home day, , when came , fired webpack dev server again morning, no errors, no issues, works expected yesterday. don't understand, , i'm pretty frustrated, i'm glad wasn't losing mind, , works way want to.