I’m trying to develop a monitor app with dynamic views. I’d like to implement a feature where clicking a button brings up a new view, and those views are put in multiple containers (I’m using ElRow and ElCol from ElementPlus). Here’s my code:

<template>
  <el-container>
    <el-header>
      <h1>MONITOR</h1>
    </el-header>
    <el-main>
      <div>
        <el-row>
          <el-col :span="12"> <el-button type="primary" @click="addView">Add a new view</el-button> </el-col>
        </el-row>
        <component :is="rowContainer"></component>
      </div>
    </el-main>
  </el-container>
</template>

<script setup>
import { onMounted, ref, h, nextTick } from 'vue';
import { createVNode } from 'vue';
import { ElRow,ElButton,ElCol } from 'element-plus';

let windowWidth=0;
let viewsCount=0;
let viewsWidth=0;
let rowCount=0;
let curViewRow=null;
const rows=[]
const rowContainer=ref(h('div',{'id':'rowContainer'}))
let curRowChilds=null


onMounted(()=>{
  windowWidth=window.screen.width;
  viewsWidth=Math.max(500,windowWidth/4);
  console.log('Mounted')
  
})

const addView=()=>{
    if ((viewsCount+1)*viewsWidth>rowCount*windowWidth){
      curRowChilds=[]
      let newElRow=createVNode(ElRow,{"id":`viewsRowContainer${rowCount}`,"size":"width:100%;","gutter":15},curRowChilds)
      curViewRow=newElRow;
      rowCount+=1
      rows.push(curViewRow)
    }
    let newViewComponent=createVNode('p',null,`this is view No.${viewsCount}`);
    let deleteButton=createVNode(ElButton,{type:"primary",onClick:removeView,},'×');
    let colInnerContainer=createVNode('div',{class:'colInnerContainer'},[newViewComponent,deleteButton])
    let newCol=createVNode(ElCol,{"span":6,id:`viewsNo${viewsCount}`},[colInnerContainer])
    curRowChilds.push(newCol)
    *rowContainer.value=h('div',{'id':'rowContainer'},rows)*
    viewsCount+=1;
};
const removeView=()=>{};
</script>

It did work when I just add the first row. But when it comes to the second row (rowCount=2), nothing will change when clicking the button. But when I change the rows into [rows] in the line with ‘*’, it works fine.

Who can explain this?