nvue使用uni-grid-item下报错

<template>
<view class="content">
<view class="head">
<image src="../../static/姜饼人.png"></image>
<view class="head-title">
<text>绘本馆同学们</text>
<text>你们好 我是姜饼人</text>
</view>
</view>
<view>
<uni-grid :column="4" :show-border="false" :square="false">
<uni-grid-item v-for="(item ,index) in list" :index="index" :key="index">
<view class="grid-item-box flex-col">
<image class="image" :src="item.src" mode="heightFix" />
<text class="text">{{item.name}}</text>
<view v-if="item.badge" class="grid-dot">
<uni-badge :text="item.badge" />
</view>
</view>
</uni-grid-item>
</uni-grid>
</view>
</view>
</template>
<script setup>
const count = ref(0);
function increment() {
count.value++;
uni.showToast({
title: 点击了增加按钮，当前计数: ${count.value},
icon: 'none'
});
}
const list = ref([
{ url: '/static/c1.png', text: 'Grid 1', badge: '0', type: "primary" },
{ url: '/static/c2.png', text: 'Grid 2', badge: '1', type: "success" },
{ url: '/static/c3.png', text: 'Grid 3', badge: '99', type: "warning" },
{ url: '/static/c4.png', text: 'Grid 4', badge: '2' },
{ url: '/static/c5.png', text: 'Grid 5' },
{ url: '/static/c6.png', text: 'Grid 6' },
{ url: '/static/c7.png', text: 'Grid 7' },
{ url: '/static/c8.png', text: 'Grid 8' },
{ url: '/static/c9.png', text: 'Grid 9' }
]);
function change(e) {
let { index } = e.detail;
if (list.value[index].badge !== undefined) {
list.value[index].badge = parseInt(list.value[index].badge) + 1;
} else {
list.value[index].badge = 1; // Initialize the badge if it didn't exist before
}
uni.showToast({
title: 点击第${index + 1}个宫格,
icon: 'none'
});
}
</script>