Vue.js カスタムフィルタでhtmlタグを含んだ文字を返したい


Vue.jsのカスタムフィルタを作成し、改行を`<br>`タグに変換したいのですが、どうやるのがいいでしょうか。

[code]

    <p>{{text | nl2br}}</p>
    
[/code]

[code]

    Vue.filter('nl2br', value => value.replace(/\n/g, '<br>'));
    
[/code]

これだと `"文字列<br>文字列"` のように、エスケープされた文字が表示されます。  
以下のように、text全てエスケープしない、というのはやりたくありません。

[code]

    <p>{{{text | nl2br}}}</p>
    
[/code]




簡単にやるとすれば、filterを使わずに、そもそも改行させるようにcssを使ったほうが早いと思いますが、どうでしょうか？  
これならば、タグはエスケープされないと思いますが。

[code]

    <style>
    p {
      white-space: pre;
    }
    </style>
    
[/code]




簡単にやるとすれば、filterを使わずに、そもそも改行させるようにcssを使ったほうが早いと思いますが、どうでしょうか？  
これならば、タグはエスケープされないと思いますが。

[code]

    <style>
    p {
      white-space: pre;
    }
    </style>
    
[/code]

