nuxt3 怎么处理useAsyncData()返回的数据

Question

我请求的是一个列表，但是我根据屏幕大小，只显示特定的几个数据。就是首页列表显示2行，小屏幕显示3个*2=6个，中屏幕显示8个，大屏幕显示10个。
但是返回的列表数据很多，我必须要处理数据，才能显示对应的列表个数。
我不理解的是只要我一改数据，网页源代码上动态接口的数据就不见了，就是不可SEO，但是我们必须要SEO。下图就是数据全没了：

但是只要我不动数据，网页源代码就正常显示接口数据。下图就是有数据的：

我的数据是传到子组件的，我在子组件中进行处理（现在的问题是无论我在哪里处理数据，网页源代码都没有接口数据）：

我知道问题出在哪里了，因为传过来的props.total为0，total是在父组件的onMounted里根据window.innerWidth的不同获取到不同的total。因为服务器端没有window这一概念，所以必须在客户端获取window.innerWidth ，因为数据是在服务器端渲染的，所以传到子组件的props.total为0。

请求有什么办法可以处理数据？

Answer 1

放到computed中进行处理呢？

computed:{
//处理useAsyncData返回数据的方法
dataShowBySceneSize(){

},
//检测屏幕尺寸的方法
checkSceneSize(){
}
}