laravel - vueを使用してlaravelテンプレートでhtmlタグを正しく解釈するにはどうすればよいですか?

Question

laravel8 inertia vueのvueにmarkdowマークアップを使ったテキストを表示したいです。

私はブレードテンプレートでそれを変換する方法を知っています

{!!Markdown($post->body, ['config' => 'default']) !!}

ただし、vue テンプレートでは機能しません。

これを回避するために、markdown を html に変換してコントローラーに入れます。

    public function Index($id = Null)
    {
        $this->id = $id;
        return Inertia::render('Posts/Index', [
            // 'posts' => Post::orderBy('created_at','DESC')->with('user')->get()
            'posts' => Post::select('id', 'title', 'abstract', 'created_at')
                ->addSelect([
                    'userfirstname' => User::select('firstname')->whereColumn('id', 'posts.user_id'),
                    'userlastname' => User::select('familyname')->whereColumn('id', 'posts.user_id')
                ])
                ->orderBy('created_at', 'DESC')
                ->get(),

            //lazily evaluated
            'details' => function () {
                $post = Post::find($this->id);
                $parser = new Parsedown();
                $post->body = $parser->text($post->body);
                return $post;
            }
        ]);
    }
}

このコントローラは、メイン ビューに含まれるコンポーネントを更新するために使用されます。これがコンポーネントのビューです

<template>
  <div class="container bg-gray-100">
    {{details.title}}
    {{details.body}}
  </div>
</template>

<script>
export default {
  name: "PostDetails",
  props: ["details"],
};
</script>

コンポーネントは URL にアクセスすると正しく更新されますが、表示されるテキストにはテキスト エディタを使用しているかのように html タグが表示されます。HTMLマークアップを正しく解釈するにはどうすればよいですか?