How can I render partially in vue3?

When I use my template with v-for, I tried to change one value of row in list.
But vuejs3 execute all list on v-for how can I render partially?

This is my code snippet

  1. gridTemplate.html
<script type="text/x-template" id="gridTemplate">
    <div class="table-responsive text-nowrap">
    <th v-for="(colItem, colItemIdx) in options.cols">
    {{console('col', colItemIdx)}}

<tr v-for="(dataItem, dataItemIdx) in">
    {{console('data', dataItemIdx)}}
    <td v-for="(colItem, colItemIdx) in options.cols">
        <div v-for="(item, itemIdx) in dataItem[]">
  1. grid-template.js

const vueGrid = {
template: ‘#gridTemplate’,
props: {
options: Object
methods: {
// I used to check v-for when I change row data.
console: function (name, idx) {
console.log(name, idx);

  1. Caller
  • js

grid: {
cols: [{name: ‘col1’}, {name: ‘col2’}],
data: [{‘col1’: {value: ‘data1’}, ‘col2’: {value: ‘data2’}}]
setTimeout(function () {[0].col1.value = ‘change’;
}, 3000);

  • html
    <grid :options="grid"/>

Use components. Vue will isolate re-renders to just the components that have prop changes.