如何在vue中正确生成嵌套数组

<template>
  <div>
    <button @click="generateNestedArray">生成嵌套数组</button>
    <pre>{{ nestedArray }}</pre>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nestedArray: [],
    };
  },
  methods: {
    generateNestedArray() {
      const depth = 3; // 嵌套数组的层级
      const length = 5; // 每个层级的数组长度

      const generateLevel = (currentDepth) => {
        const level = [];

        for (let i = 0; i < length; i++) {
          if (currentDepth < depth - 1) {
            level.push(generateLevel(currentDepth + 1));
          } else {
            level.push(`Item ${i}`);
          }
        }

        return level;
      };

      this.nestedArray = generateLevel(0);
    },
  },
};
</script>