Vuejs reactivity issues?

Question

Vue.js

html

<div id="app" >
  <h2>Todo:</h2>
  <ol class='tasks'  >
    <t-element v-for='t in todos' :t='t'  ></t-element>
  </ol>
  <h3>
    Add new task:
  </h3>
  <input  v-model="newt" type='text'/>
  <button @click="addt"   >
    Add task
  </button>
</div>

js

Vue.component('t-element',{
  props : ['t'],
  data : function () {
},
  template : `<li>
      <label>
        <input type="checkbox"
 >
        <span >
          {{ t.text }}:{{t.timeput}}
        </span>
  
      </label>
    </li>`,
});

new Vue({
  el: "#app",
  data: {
    todos: [
   { text: "t" timeput:20 },
   { text: "tt", timeput:1},
   { text: "ttt", timeput:19 },
   { text: "tttt", timeput:100 }
    ],

    newt : "",
 },
  mounted (){
   this.todos.forEach(function(s){
      
       s.timeput  = setInterval(function(){
          s.timeput += 1;
         }, 1000);
      });
   
  
  },
  
  
  methods: {
 
    addt: function(){

    
     this.todos.push({
       text:this.newt,
   
       timeput:2
    });
    this.newt = '';
    },

  }
  });

The bottom line is this....
there is an array of data....in mounted there is an incrimination of the timeput property of all elements of the array...
but when a new element is added to the array ...the timeput value of the new element does not change

Answer 1

the method mounted()fires only once, when the component is placed.
After adding a new element mounted(), it is not called and the timer for the added element is not started.
There is no need to create an individual timer for each element. Make one timer for the entire component, update all elements when it fires: