[Nuxt]optional chainingでちょっと複雑なAPI埋め込みするときにスッキリ書く

複雑なAPIだとフラットで返ってこないものも多いのではないでしょうか？
javascriptのオブジェクトを辿る時、
aaa.bbb.ccc.dddとしますが、途中のcccの返りがnullならエラー。
でも分岐書くの結構辛い・・・
そんな時はoptional chainingですね。

他の言語ではあったりするけど、javascriptはまだ待ちの段階。
いち早く使うならプラグインいれてトランスパイル。

npm i -D @babel/plugin-proposal-optional-chaining

nuxt.config.js

  build: {
    babel: {
      plugins: [
        '@babel/plugin-proposal-optional-chaining',
       ],
    },
  },

aaa.bbb.ccc?.ddd
これでいけ・・・
なんとtemplate内の埋め込みでは使えないではないですか・・・
scriptブロックでは使えるけど

vue2では難しいみたいで、vue3対応を待つしかなさそうです。
Nuxtのvue3はいつ・・・

methods経由かcomputedで対応もありですが、記述減らしたいのに増やしてどうする・・・
lodashで対応させるって記事があったのでとりあえずそれで対応するのが妥協かもですね・・・