Vue - How to re-render specific array object change without re-render entire array

I have been looking for this answer for a long time now. Finally posting it since I have a problem related to this.

Please check this below code snippet

<div>
    <template v-for="(row, index) in rows">
         <tr v-if="hasChildData(row, index)" :key="`row-${tabId}-${index}`">
              <!-- Rest of the logic -->
         </tr>
    </template>
</div>

Method

hasChildData(row, index) {
  console.log("Looping index: "+ index);
  return row.childData;
}

Lets say rows is an array and has 5 elements

data() {
    return {
      rows: [
        { test: 123 },
        { test: 345 },
        { test: 567 },
        { test: 789 },
        { test: 904 },
      ]
   };
}

Somewhere i try to update a specific row in rows array. In this case index 3

setChildData() {
    Vue.set(this.rows[3], "childData", true);
}

Why does Vue re-render the entire loop. Is there a way to only re-render specific index only 3 ? This is related to Change specific index without re-render whole array in Vuejs but didn't find the answer what i was looking for.

Output After calling setChildData():

Looping index: 0

Looping index: 1

Looping index: 2

Looping index: 3

Looping index: 4

While I Expect

Looping index: 3