SNS お知らせ vue.js axiosで取得

書庫へ移す ボタンをスマートに表示するため変更したが、テキストボックスの表示が
改行を含めやや表示がおかしい。
PHPで処理する方法に戻すが、せっかく作ったのでここに保管。

<section id="notice"<?php if(! $editor) { echo ' style="max-height:none"'; } ?>>
   <h3 class="baner_title">おしらせ</h3>
<ul>
  <li v-for="list in oshirase" v-bind:class="list.class">
    <div v-html="list.content"></div>
    
    <footer class="entry-meta">
    <div v-if="list.author_id ==user_id || user_id ==1" style="display: inline">
        <a v-bind:href="'./wp-admin/post.php?post=' + list.id + '&action=edit'">編集 </a>
        <button v-on:click="moveOshirase(list.id)" class="abutton">書庫へ移す</button>　
        <button class="abutton" v-on:click="deleteOshirase(list.id)">削除</button>　
      </div>
      {{ list.post_date }}　{{ list.author_name }}
    </footer>
  </li>
</ul>
   </section>



   const app = new Vue({
   	el :'#content',
   	data : {
   		oshirase: [],
   	},
     created(){
   		this.getOshirase();
   	},

   	methods: {
   		getOshirase(){
   		  axios.get('<?php echo home_url(); ?>/axios',
   				 { params:{
   					 get: 'notice',
   					 user_id : this.user_id,
   					usercatid : this.usercatid
   				 }
   				})
             .then(response => this.oshirase = response.data)
             .catch(response => console.log(response))
   		},

   		moveOshirase(id){
   			fetch("<?php echo home_url(); ?>/fetch?move_notice&id=" + id)
   				.then(response => {
   						return response.json(); 
   				})
   				.then(data => { 
   					this.getOshirase();
   				})
   				.catch(error => { 
   						console.log(error);
   				})
   		},
   		deleteOshirase(id){
   			let check = confirm('このお知らせを本当に削除しますか？');
   			if(check){
   				fetch("<?php echo home_url(); ?>/fetch?delete_notice&id=" + id)
   					.then(response => {
   							return response.json(); 
   					})
   					.then(data => { 
   						this.getOshirase();
   					})
   					.catch(error => { 
   							console.log(error);
   					})
   			}
   		},   		

   	}
   })

axios.php

if($_GET['get']=='notice'){
	$user_id = $_GET['user_id'];
	$usercatid = $_GET['usercatid'];
	
	//検索が早くなるようにタグではなくCommentsステータスでの分類に変更
$sql = "SELECT ID,post_author,post_date,post_content,post_title FROM wp_posts
WHERE post_type='notice' AND post_status='publish' AND comment_status='open' ORDER BY post_date DESC";
$results = $wpdb->get_results($sql);
$res = array();
	
foreach ($results as $key=>$val){
	$id = $val->ID;
	$authordata = get_userdata($val->post_author);
	$author_login = $authordata->user_login;
	$author_name = $authordata->display_name;
	
	  $staff= get_post_meta($id, 'notice_staff', true);
		if($staff !='') {
		  //通知者に投稿者を追加
		  //カテゴリースラッグからカテゴリーIDを取得
			$author_cat=get_category_by_slug($author_login);
			$author_catid= $author_cat ->cat_ID;
		  array_push($staff, $author_catid);
	  }else{
			$staff = array();
		}
	
	 $select = get_field('notice_selet',$id);
			
 if($select==='全社員' || array_key_exists($usercatid,array_flip($staff)) || array_key_exists($user_id,array_flip($officer))) {
	 if($select=='全社員') {
		 $res[$key]['class'] = 'allstaff';
	 }else{
		 $res[$key]['class'] = 'selectstaff';
	 }
	 $content = preg_replace("/(<[a-zA-Z0-9=\"\/\ ]+>)<br\ \/>/", "$1", nl2br($val->post_content));
	 
	 
	 if($val->post_title !=''){
		  $res[$key]['content'] = '[ '. $val->post_title .' ]<br>'.$content;
	 }
	 else{
		  $res[$key]['content'] = $content;
	 }
	 $res[$key]['id'] = $id;
	 $res[$key]['author_id'] = $val->post_author;
	 $res[$key]['author_name'] = $author_name;
	 $res[$key]['post_date'] = date('Y/m/d', strtotime($val->post_date));
	 
	 }
}
	echo json_encode($res);

}