Vue-Konva:有没有一种动态重新排序图层的方法？

<template>
  <v-stage :config="stageConfig">
    <v-layer v-for="(shape, index) in shapes" :key="index" :config="layerConfig(index)">
      <v-rect :config="shapeConfig(shape)" />
    </v-layer>
  </v-stage>
</template>

<script>
export default {
  data() {
    return {
      stageConfig: {
        width: 500,
        height: 500
      },
      shapes: [
        { x: 50, y: 50, width: 100, height: 100, zIndex: 1 },
        { x: 150, y: 150, width: 100, height: 100, zIndex: 2 },
        { x: 250, y: 250, width: 100, height: 100, zIndex: 3 }
      ]
    };
  },
  methods: {
    layerConfig(index) {
      return {
        draggable: true,
        zIndex: this.shapes[index].zIndex,
        dragend: () => {
          this.reorderLayers();
        }
      };
    },
    shapeConfig(shape) {
      return {
        x: shape.x,
        y: shape.y,
        width: shape.width,
        height: shape.height,
        fill: 'red'
      };
    },
    reorderLayers() {
      this.shapes.sort((a, b) => a.zIndex - b.zIndex);
    }
  }
};
</script>