How can I drawing by order - vue.js

Question

I want to create a drawing project.
But It order by vue code.
<v-stage
ref="stage"
:config="stageSize"
#mousemove="move"
#touchmove="handleMouseMove"
#mouseDown="handleMouseDown"
#touchstart="handleMouseDown"
#mouseUp="handleMouseUp"
#touchend="handleMouseUp"
>
<v-layer ref="layer">
<v-image
:config="{ image: image, draggable: true, centeredScaling: true }"
/>
<v-image :config="{ image: image2, draggable: true }" />
<v-rect
v-for="(rec, recIndex) in recs"
:key="`recIndex_${recIndex}`"
:config="{
x: Math.min(rec.startPointX, rec.startPointX + rec.width),
y: Math.min(rec.startPointY, rec.startPointY + rec.height),
width: Math.abs(rec.width),
height: Math.abs(rec.height),
fill: 'rgb(0,0,0,0)',
stroke: 'black',
strokeWidth: 3,
}"
/>
<v-text
ref="text"
:config="{
x: 10,
y: 10,
fontSize: 20,
text: text,
fill: 'black',
}"
/>
<v-line
v-for="(line, lineIndex) in lines"
:key="`lineIndex_${lineIndex}`"
:config="{
stroke: line.color,
strokeWidth: line.width,
globalCompositeOperation: line.globalCompositeOperation,
lineCap: 'round',
points: line.points,
}"
></v-line>
</v-layer>
</v-stage>
My step is
draw red line
draw square
draw pink line
I want canvas render by drawing order, Is square up than red line
I didn't use z-index because that all change z-index but I just want after brush move up
can anyone help me?