VueJS Components inside a loop act as one

UPDATE Was able to make it work, but got one last problem. Updated code is here: VueJs not working on first click or first event

-----------------------------------------------------------

I've been trying to find out a way for the components inside a loop to not act as one.

I have a loop (3 divs), and inside the loop, I have 2 textboxes. But whenever I enter a value in any of them, the value is populated to everyone.

Can anyone help me separate those components?

I'm trying to make the parent div (1st loop) dynamic. So the children components (2nd loop) should be acting separately with their own grandparent components (textbox).

Here's my code:

<div id="app">
    <div v-for="(ctr, c) in 3" :key="c">
      <button @click="input_add">1st</button>
      <div>
        <div v-for="(input, act) in inputs" :key="act.id">
          <input type="text" v-model="input.name"> 
          <input type="text" v-model="input.time">
          <button @click="input_remove(act)">Delete</button>
          <button @click="input_add">Add row</button>
        </div>
      </div>
      {{ inputs }}  
    </div>
  </div>

const app = new Vue({
    el: "#app",
    data: {
    inputs: [],
    counter: 0,
  },

  methods: {
    input_add() {
      this.inputs.push({
        id: this.counter + 1,
        day: null,
        name: null,
        time: null,
      })
      this.counter += 1
    },
    input_remove(index) {
      this.inputs.splice(index,1)
      this.counter -= 1
    }
  }
});

Result: