Vue.js(nuxt.js)でdataにHTMLの特殊文字を入力したらそのままでてしまう。

Question

Nuxt環境下でwebサイトを制作しています。

フッターのコピーライトをvue.jsで表現させようと下記のようにソースを書いたのですが、
{{ mark }}の部分にコピーライトの表示をさせようとしたところ
「©」のまま表示されてしまいます。

<template lang="pug">
footer.footer
  .content.has-text-centered
    p {{ mark }} {{ now }} {{ copyright }}
</template>

<script>
export default {
  data: () => {
    return {
      mark:  '&copy;',
      now: 'wait',
      copyright: 'sample'
    };
  },
  created: function() {
    var d = new Date();
    this.now = d.getFullYear();
  },
}
</script>

出力後

<footer class="footer">
　<div class="content has-text-centered">
　　<p>&amp;copy; 2020 sample</p>
　</div>
</footer>

表示画像

template内、html(pug)に©と書けば問題なく特殊文字が表示されるのですが、
せっかくなのでvueのdataから特殊文字を使えるように調べています。

試したこと

v-htmlに記載
{{}}内で使用ができず、結局はspan(v-html)のようにな書き方になりspanタグが余分がついてくる

v-text
同じ

タグをpreにする
同じ

なにか情報や探し方、考え方があればご回答よろしくお願いいたします。

Answer 1

このコメント欄の下の方にあるsanitize-htmlを使用してみてはいかがでしょうか。

Sanitize v-html