Vue.jsのv-bindでhtmlを渡したい

問題

Titleコンポーネントを作った際に<br>付きの値を渡したら<br>ごと反映されてしまった

Title.vue

<template>
  <div class="title">
    <p class="title__lead__top">{{ top }}</p>
    <h2 class="title__catch">{{ catchCopy }}</h2>
    <p class="title__lead__bottom">
      {{ bottom }}
    </p>
  </div>
</template>

<script>
export default {
  name: "Title",
  data() {
    return {};
  },
  props: {
    top: {
      type: String,
      require: false,
      default: "top"
    },
    catchCopy: {
      type: String,
      require: true
    },
    bottom: {
      type: String,
      require: false,
      default: "bottom"
    }
  }
};
</script>

<style scoped></style>

Home.vue

<Title
top="キャッチコピー説明(top)"
catch-copy="キャッチコピー<br>キャッチコピー02<br>キャッチコピー03"
bottom="キャッチコピー説明(bottom)"
></Title>

解決方法

文字列をそのまま渡してしまっていたのでv-htmlディレクティブをつかう

Title.vue

<template>
  <div class="title">
    <p class="title__lead__top">{{ top }}</p>
    <h2 class="title__catch" v-html="catchCopy"></h2>
    <p class="title__lead__bottom">
      {{ bottom }}
    </p>
  </div>
</template>

<script>
export default {
  name: "Title",
  data() {
    return {};
  },
  props: {
    top: {
      type: String,
      require: false,
      default: "top"
    },
    catchCopy: {
      type: String,
      require: true
    },
    bottom: {
      type: String,
      require: false,
      default: "bottom"
    }
  }
};
</script>

<style scoped></style>