.vueファイルをタグで改行させたい

Question

前提・実現したいこと

現在、Vue.jsを使用してSPAのサイトの作り方の勉強をしています。
実現したいこととしましては.vueファイルにおいて、
以下の「message1」と「message2」を改行させることです。

<template>
  <v-footer id="footer-bar" app height="60">
    <p v-cloak class="message1">{{ message1 }}</p>
    <p v-cloak class="message2">{{ message2 }}</p>
  </v-footer>
</template>

<script>
export default {
  name: '～～～～',
  data () {
    return {
      message1: 'メッセージ１です。',
      message2: 'メッセージ２です。',
    }
  },
}
</script>

発生している問題・エラーメッセージ

上記ファイルを実行したところ、

メッセージ１です。メッセージ２です。

と表示されてしまいます。

試したこと

調べたところ、cssでwhite-spaceを使用すれば一応改行できるとのことで実際試したところできたのですが、

<script>のところを以下のように書かなければならず、少ししたいことと違います。 ```vue data () { return { message1: `メッセージ１です。 メッセージ２です。`, } }, ``` なんとか、タグで改行させる方法などご存じの方がいらっしゃればご教授いただけませんでしょうか。 （pタグでなくても大丈夫です） よろしくお願いいたします。 ### 補足情報（FW/ツールのバージョンなど） vue.js2.9.6

Answer 1

ptagはデフォルトでblock element(display: block)なのでCSSを適用していない限り別々の行に表示されるはずです。CSSを確認してください。

Comments

[PochoPoccho]

回答ありがとうございます。
karamarimo様のご指摘でCSSを再度確認してみましたが、上書きしている処理は見当たらなかったため、開発者コンソールで確認してみたところ、pタグにdisplay: blockは効いていました。
しかし今回の原因と関係ないと思っていたため記載を省略していたのですが、上記のHTMLはv-footerタグ内の記載で、v-footerタグにはdisplay:flexが設定されており、それが原因で２つの要素が並列に記載されてしまっていたみたいです。
こちらの確認不足でお手をわずらわせてしまいすみませんでした。
今後は問題箇所の周辺も確認したいと思います、ありがとうございました。

Answer 2

いまいち理解仕切れていないので、期待と違っていればすいません。

return で返すmessageには好きにdomをいれれたりするのですかね？
で、あれば v-html とかで出来そうな気がしています!
https://jp.vuejs.org/v2/guide/syntax.html#生の-HTML

Comments

[PochoPoccho]

回答ありがとうございます。
今回の質問内容と関係ないと思っていたため私の情報不足で大変申し訳ないのですが、質問内容のpタグは両方ともv-footer内に記載しており、v-footerタグにはdisplay:flexが設定されていたため、それが原因で２つの要素が並列に記載されてしまっていたみたいです。
せっかくご回答いただいたのに申し訳ございませんでした。
ありがとうございました！