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再次改變的時候元素不會刷新。

最後沒有辦法只能一個個去改了