nuxt.js/axiosでJSONを取得したときの処理方法

Question

vue.js、nuxt.jsともに勉強中で、ヘッドレスＣＭＳを使用してブログを作ろうと試みています。

まず下記のようなJSONデータがあります。

{"id":"000001","createdAt":"2020-09-01","updatedAt":"2020-09-01","publishedAt":"2020-09-01","title":"Hello World","content":"First Contents","image":{"url":"https://test.jpg"},"category":["cate01"]}

nuxt.jsでaxiosを使用し
template側で{{ title }}とすればタイトルが取れますが、imageやcategoryの取り方が分かりません。

imageはタグを生成して画像を表示したいと考えています。
<img src="###">
この###の部分に{ iamge }としても動きません。（当然かと思いますが・・・）

ちなみにscriptは以下のようになっています。

  async asyncData() {
    const { data } = await axios.get(
      'https://sample.com',
      {
        headers: { 'X-API-KEY': '###' }
      }
    )
    return data
  }

解決方法をご存じの方、いらっしゃいましたらよろしくお願い致します。

Answer 1

以下ではダメなんでしょうか？

<img src="image.url">

Comments

[tktail]

ありがとうございます。
試してみましたが、ダメでした。。

質問を追記編集しますね。