vue 字符串内容格式化显示并添加序号

最近写代码遇到了返回数据 格式化显示的问题
场景：当点击导入模板按钮导入数据失败时，后台会返回模板中数据填报错误地方的数据
页面显示：
返回数据：
“共失败导入13条数据；\ n项目名称： vue显示内容格式化1， 项目进度必填；\ n项目名称： vue显示内容格式化2， 项目进度必填；\ n项目名称： vue显示内容格式化3， 项目进度必填；\ n项目名称： vue显示内容格式化4， 项目进度必填；\ n项目名称： vue显示内容格式化5， 管理类别必填；\ n项目名称： vue显示内容格式化6， 管理类别必填；\ n项目名称： vue显示内容格式化7， 管理类别必填；\ n项目名称： vue显示内容格式化8， 管理类别必填；\ n项目名称： vue显示内容格式化9， 管理类别必填；\ n项目名称： vue显示内容格式化10， 管理类别必填；\ n项目名称： vue显示内容格式化11， 管理类别必填；\ n项目名称： vue显示内容格式化12， 管理类别必填；\ n项目名称： vue显示内容格式化13， 管理类别必填；\ n”

要求：数据格式化显示，并在每条错误信息前添加序号

数据格式化简单，因为在字符串数据中每条数据是有\n换行符，所以直接可以用pre标签进行格式化显示
代码：

<el-dialog title="提示" :visible.sync="importPrompt" :close-on-click-modal="false"