title: vuejs start a timer for every record
body: <p>I have this component rendered, I need to tell the users how much time remaining for each record displayed</p>
  
  <p>I couldn't get anything worked out, I don't know any legible ways to work it out, so just trying calling out methods. I tried child components too but no avail.</p>
  
  <pre><code>&lt;template&gt;
  &lt;div&gt;
  
  &lt;ul  v-for="question in questions"&gt;
  
   {{init_timer(secs)}}
   {{start_timer()}}
       &lt;li&gt;
  
                        &lt;a href="#" id="user-profile-text-link"&gt;{{question.name}}&lt;/a&gt;
                        &lt;span class="question_clock"&gt;Validity :  -- counter : {{time_remaining}}
  &lt;/span&gt; &lt;/small&gt;
  
              &lt;/li&gt;
  
  
  
             &lt;/ul&gt;
  
    &lt;/div&gt;
  
  
  
  
  &lt;/template&gt;
  
  &lt;script&gt;
  
  
      export default {
  
      data: function(){
          return {
              questions: [],
              time_remaining : 1
          };
      },
  
           methods: {
  
             init_timer: function(secs) {
                this.time_remaining = secs
             },
              start_timer: function() {
                console.log('startiem')
                setTimeout(function () {  this.time_remaining -= 1 }.bind(this), 1000)
  
  
  
             },
  
  
            }
          ,
          created: function(){
  
              $.getJSON('/questions/json', function(response){
               this.questions = response
            }.bind(this ));
          },
  
  
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>any help is much appreciated</p>