I'm new to vueJS and I'm trying to restructure my data and display it in a TABLE. I used computed variantsData to create the new array.

My problem is that its displaying correctly but the fields are not updating

computed

variantsData() {
  const table = {
    varOneItems: this.variation1, // ['red','white]
  };

  const newArray = [];

    table.varOneItems.forEach((v1) => {
      newArray.push({
        var1: v1.name,
        var2: null,
        price: null,
        qty: 0,
        sku: null,
        image: false,
      });
    });

  return newArray;
}

template

    <tr v-for="(v, index) in variantsData" :key="index">
                <td>
                  <b-input-group prepend="$">
                    <b-form-input
                      type="number"
                      placeholder="Price"
                      v-model="v.price" <!-- not updating  -->
                    ></b-form-input>
                  </b-input-group>
                </td>
                <td>
                  <b-form-input
                    v-model="v.qty" <!-- not updating  -->
                    type="number"
                    placeholder="stock"
                  ></b-form-input>
                </td>
                <td>
                  <b-form-input type="text" v-model="v.sku"></b-form-input> <!-- not updating  -->
                </td>
              </tr>