vue项目多行文本框中内容，在实际页面中不换行，如何方便的解决？

背景是这样的
一个vue项目已经开发了半年，
突然接到一个需求要把所有的 textarea 中内容，在提交后变成换行显示的

 <el-input v-model="form.projectInfo.remarks" type="textarea" rows="3" style="width:500px;"></el-input>

<h5 class="info-title">项目经理有话说</h5>
<ul class="detail-content-list clearfix">
	 <div>
	     <span class="label">项目经理说：</span>Ï
	     <div class="detail-text">{{projectInfo.remarks}}</div>
	 </div>
</ul>

这样写是不会正常解析的，内容中的回车符号被丢弃
如果改成下面这样写会正常解析

1.使用pre标签
2.外部flex布局
3.不想变形的元素使用 flex-shrink:0

 <el-col v-show="projectInfo.remarks" :span="16" style="font-size:13px;display:flex;">
     <i class="iconfont" style="color:#f80; font-size: 17px;margin-left:-5px;">&#xe61a;</i>
     <span style="flex-shrink: 0;;">项目经理有话说：</span>
     <pre>{{projectInfo.remarks}}</pre>
 </el-col>

以上是解决的最终方案，但是在这之前我还尝试过其他的方案。

虽然失败了，但是也接触到不少东西。
上面说了，项目已经做了半年了，textarea一共有将近两百个
不想一个个去修改
首先想到的是在axios请求做一个拦截，将返回中数据的 \n\r 全部替换成 <br> 标签

Axios.interceptors.response.use(
    response => {
    	//这里面可以对response进行修改
        return response;
    },
    error => {
        return error；
    }
);

具体的替换就不去写了，因为即使替换也需要用v-html去再次解析，同样是一个个去修改，不符合预期。

第二个方法是页面monted后,捕捉当前页面所有根元素内容中的换行符，如果有就替换成 <br>
然后改变符合条件的根元素
这样虽然有效但是因为替换了dom元素，会破坏原先 data和 元素的绑定关系，data再次改变的时候元素不会刷新。

最后没有办法只能一个个去改了