【Nuxt bridge × axios】でデータを取得する

環境

nuxt bridge
vue2.6
@nuxtjs/axios

概要

公式に書いているuseLazyAsyncDataやuseLazyFetchがなぜか機能しなかったので、axiosを使ってデータを取得することにしました。

正解ではないかもしれませんので、ご参考程度に見てください。

実装方法

show.vue

<template>
    {{ user.id }}
</template>

<script setup>
const nuxtApp = useNuxtApp();
const user = ref({});

(async () => {
  await nuxtApp.$axios
    .$get('/api/users/' + userId)
    .then((response) => {
      user.value = response.data;
    })
    .catch((error) => {
      console.log(error)
    });
})();
</script>

ポイント・注意点としては、、、

composition-apiなのでrefでリアクティブなデータ定義としています。
(あえて、reactiveではなくrefを使う形にしています)

さらに以下のように{}として空のオブジェクトを定義しないと、user.idがundefinedとなってしまいました。
const user = ref({});

もっといい書き方があれば、是非とも教えてください。