Multiple Vue.set() not updating object/DOM

The use of Date.now() is not correct.it happens so fast, that the timestamp sometimes not changing between the 2 this.$set operations, so you override the value in logs object.

see the logs of Date.now() when i click the first button

 1509287060410 // first result of Date.now. 1509287060412 // Second Result of Date.now - this time, it's different from the first attempt, so 2 different entries will be created. 1509287061243 // another click on the button - timestamp has changed obviosuly. 1509287061243 // Javascript did the second Set so far, that time timestamp didn't even changed yet. thus, it overrides the value of the second entry

so this log, the result of 4 this.$set operations, created this logs object:

{    1509287060410:"I was clicked!"    1509287060412:"I was clicked again!"    1509287061243:"I was clicked again!"}

The last 1509287061243 property was overrriden.

You have to ensure that the key of this.$set (second argument of the function) is different every time you call it.

See my new code suggestion:

  data() {    return {      title: 'Multiple Vue.set() not updating object/DOM',      logs: {},      index: 0    }  },  methods: {    log: function(data) {      console.log(Date.now())      this.index += 1      this.$set(this.logs, this.index, data)    },

You can also change the logs type to Array. This way you won't miss any log due to key override. For example,

new Vue({  el: '#app',  data() {    return {      logs: []    }  },  methods: {    log(data) {      this.logs.push({        time: Date.now(),        text: data      })    },    logClick() {      this.log('I was clicked!')      this.log('I was clicked again!')    }  }})

<div id="app">  <button @click="logClick">Log click :)</button>  <ul v-if="logs">    <li v-for="(log, i) in logs" :key="i" v-text="log.text"></li>  </ul></div><script src="https://unpkg.com/vue"></script>