Alpine.jsでX-data入れ子(nest)で表示されない時の解決方法

問題

Alpine.js 2.xでX-data入れ子(nest)で表示されない時の解決方法
親子関係でx-dataは引き継げるが、間に別のx-dataが入るのなどすると引き継げなくなる。

解決方法

Alpine.jsのバージョン3以上を使えば解決する。

それまではスコープ外で関数を使用したり追記する必要があったが、バージョンを変えれば治る。手間もかからない方法で日本語ではぱっとみつけられなかったのでメモ。

参考URL

公式 https://alpinejs.dev/upgrade-guide#x-data-scope