title: Selecting a single row is Selecting all other rows in Vue.js
body: <p>I am calculating estimated cost. Selecting a product fetch the details about the product and showing it's description and price on the input box. And then upon clicking in add button a new row will appear for another selection. But the problem is the new row appears with the older row data. And changing a single row affects all other rows. Here is my code so far:</p>
  <pre><code>&lt;tbody v-for=&quot;row in rows&quot; :key=&quot;index&quot;&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;select @change=&quot;selected&quot; v-model=&quot;product_id&quot; class=&quot;form-control&quot; name=&quot;product_id&quot; id=&quot;product_id&quot;&gt;
                  &lt;option value=&quot;&quot;&gt;Select Product&lt;/option&gt;
                  &lt;option v-for=&quot;item in items&quot; :value=&quot;item.id&quot; v-text=&quot;item.product_name&quot;&gt;&lt;/option&gt;
              &lt;/select&gt;                                           
          &lt;/td&gt;
          &lt;td&gt;
              &lt;textarea type=&quot;text&quot; v-model=&quot;product.product_details&quot; name=&quot;product_details&quot; id=&quot;product_details&quot; class=&quot;form-control&quot; rows=&quot;1&quot; placeholder=&quot;Product Details&quot;&gt;&lt;/textarea&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;input v-model.number=&quot;product.product_sellPrice&quot; type=&quot;number&quot; step=&quot;any&quot; class=&quot;form-control&quot; name=&quot;rate&quot; id=&quot;rate&quot; placeholder=&quot;Rate&quot;&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;input v-model.number=&quot;product.product_tax&quot; type=&quot;number&quot; step=&quot;any&quot; class=&quot;form-control&quot; name=&quot;tax&quot; id=&quot;tax&quot; placeholder=&quot;Tax&quot;&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;input v-model=&quot;quantity&quot; type=&quot;number&quot; class=&quot;form-control&quot; name=&quot;quantity&quot; id=&quot;quantity&quot; placeholder=&quot;Quantity&quot;&gt;
          &lt;/td&gt;
              
          &lt;td&gt; 
              &lt;input :value=&quot;total&quot; type=&quot;number&quot; step=&quot;any&quot; class=&quot;form-control&quot; name=&quot;total&quot; id=&quot;total&quot; placeholder=&quot;Total Price&quot;&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;button class=&quot;btn btn-secondary&quot; v-on:click=&quot;addrow&quot; &gt;
                  &lt;i class=&quot;fa fa-plus&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;
              &lt;/button&gt;
              &lt;button v-show=&quot;length &gt; 1&quot; class=&quot;btn btn-secondary&quot; @click.prevent=&quot;removerow(index)&quot;&gt;
                  &lt;i class=&quot;fa fa-minus&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;
              &lt;/button&gt;
          &lt;/td&gt;
      &lt;/tr&gt;   
  &lt;/tbody&gt;
  </code></pre>
  <p>Vue Part</p>
  <pre><code>&lt;script&gt;
      export default{
          props: ['products'],
  
          data() {
  
              return {
                  rows: [{
  
                  }],
              
                  items: this.products,
                  product: '',
                  product_id: '',
                  quantity: '',
                  index: '',
                  total_price: '',
              }
          },
              
  
          methods: {
              addrow: function (event) {
                  event.preventDefault();
                  this.rows.push({
                  });
              },
  
              removerow: function (index) {
                  this.rows.splice(index, 1);
              },
  
              selected(e){
                  var id = this.product_id;
                  console.log(id);
                  axios.get('/estimate/product/' + id)
                    .then((response)=&gt;{
                          this.product = '';
                          this.product = response.data;
                    })
                    .catch((error) =&gt; {
                          console.log(error);
                    }); 
              },  
          }
      }
  &lt;/script&gt;  
  </code></pre>
  <p>Where am I doing wrong?</p>