構造化データ（英語ではstructured Data）とはWEBサイトの内容を検索エンジンにより理解してもらうためにHTMLとは別に記載する記述です。
構造化データを記述すると、本来なら検索結果だけの表示ですが、googleの検索結果に画像付きで掲載されたり優先して表示されることにより、よりユーザーにクリックされやすくなります。
もう一つの理由として今後、AIがWEBサイトを分析、学習するためにAIにとってデータとしてわかりやすく掲載することでAIの学習に貢献できます。

構造化データを知るためにはセマンティックWEBへの理解も必要です。
セマンティックWEBとはWEBサイトの情報を人間が把握できればよいと状況から情報をメタデータとして持たせることでコンピューターでも理解できるようにするための仕組みです。

WWWを考案したティム・バーナーズ＝リーはWeb 2.0までのWEBサイトを「ドキュメントの網」と言っています。
要するにWEBサイトが独立してドキュメントが存在している状態です。

ティム・バーナーズ＝リーはWeb 3.0を「データの網」と言っています。
データの網とは個々のWEBサイトが同様のフォーマットでデータを持つことでインターネット全体がデータベースとして機能することでより利益を享受することと私は理解しました。

現在、構造化データを記述する方法の一つにGoogleが推奨しているのがJSON-LDによる記述です。
例えば料理レシピの場合、以下のように書きます。

<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Recipe",
  "name": "コーヒーケーキ",
  "author": {
    "@type": "Person",
    "name": "マリー"
  },
  "datePublished": "2018-03-10",
  "description": "このコーヒーケーキは素晴らしく、パーティーに最適です。"
}

詳しくはこのあたりをご参照ください。
https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data?hl=ja

構造化データ マークアップ支援ツールを見てみますと
求人情報、Q&Aページ　イベント、商品などいろんな情報が構造化データに対応しているようです。
当社のシゴトサガスも構造化データとして求人情報を掲載しているのでgoogleしごと検索に掲載されています。

さて本題のVue3で構造化データを記述する方法ですが、いまだ私なりの最適解がわかっておりません。

構造化データを以下のように記載する方法はJSONがエンコードされてしまいます。

<component :is="'script'" type="application/ld+json">
    {
      "@context": "https://schema.org/",
      "@type": "Recipe",
      "name": "コーヒーケーキ",
      "author": {
        "@type": "Person",
        "name": "マリー"
      },
      "datePublished": "2018-03-10",
      "description": "このコーヒーケーキは素晴らしく、パーティーに最適です。"
    }
</component>

私が行った方法はバックエンド（php）で連想配列を作成してから、json_encodeして文字列作成したものをvue側に渡す方法です。

//PHP
$json = [];
$json = array_merge($json, array('@context' => 'https://schema.org'));
$json = array_merge($json, array('@type' => 'JobPosting'));
$json = array_merge($json, array('datePosted' => $job['updated_at']));
$jsonEncode = json_encode($json, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
$jsonText = '<script type="application/ld+json">'.$jsonEncode.'</script>';

//vue
<template v-html="jsonText" />

この方法ですとSSR（サーバーサイドレンダリング）を行った際もスキーママークアップ検証ツールでエラーがありませんでした。
しかし、リッチリザルトテストでは解析中にエラーになりました。（謎）
引き続き検証を行います。

2023年2月追記　Vue USEのSchemaOrgを使うのが良さそうです。
https://vueuse.org/functions.html#category=%40SchemaOrg

阿部

参考
https://search.google.com/test/rich-results?hl=ja