vue.jsで{{html}}の中をv-htmlでラップしたタグを出ないようにするにはどうすればいいでしょうか

Question

現在Nuxt.jsを使用してこちらを参考にしながら
サイトを制作しだしたところです。

reactは普段使用してるのですがvueの基本的なことになってしまうかもしれませんが
ググってもベストプラクティスが見つからないので記載致します。

例として
{{html}}のなかにhtmlの記載があり
htmlを反映したのですがそのままstringで吐き出されます（当たり前ですが）

それで

<span v-html="html"></span>

とすれば確かにhtmlが反映されたものが出力されます。
しかしこのやり方ですと無駄なspanタグがラップされて入ってしまいます。

{{html}}の中身だけそのままhtmlで出力する方法はあるのでしょうか。

ご教示頂ければ幸いと存じます。
それでは宜しくお願いいたします。

Answer 1

質問にあるような内容はVue本来の機能ではサポートされていません

何かしらの要素の中にHTMLを入れると思うので質問のようなことをしたいユースケースが思い当たりませんが、どうしてもということであればelement.insertAdjacentHTMLを使うほかないと思います。
※下記コードではXSS対策などは考慮しないものとします

<template>
  <div id="target">
  </div>
</template>

<script>
export default {
  data() {
    return {
      html: '<span>hoge</span>'
    }
  }
  mounted() {
    const $target = document.querySelector('#target')
    $target.insertAdjacentHTML('afterbegin', this.html)
  }
}
</script>