先附上 $nextTick 的說明吧

$nextTick 是一個魔術屬性，它允許你只在 Alpine 進行回應式 DOM 更新後才執行給定的運算式。這對於你想在 DOM 狀態回應了你的任何資料更新後，再與之互動的情形下非常有用。

簡言之，就是在DOM 更新後才執行，
那麼我用燈箱來一起說明

    <div x-data="{isOpen:false}">
        <button @click="
            isOpen=true 
            $nextTick(() => $refs.closeBtn.focus())
            "
        >open</button>
           
        <div class="mask" x-show="isOpen==true">
            <div class="lightBox">
                I'm light box. <br>
                <button 
                    @click="isOpen=false" 
                    x-ref="closeBtn"
                >close</button>
            </div>
        </div>
    </div>

燈箱的部分跟之前Day15側邊攔作法很相似，這就不多做說明了。
這次主要講 x-ref 與 $nextTick
x-ref可以放在你要撈取資料的地方，
然後幫它取個名字，像是x-ref="closeBtn"，
那麼我要找它的時候只要$refs.closeBtn後面是你要找的ref的名字，
那麼這邊$refs.closeBtn.focus()就是希望可以focuse在這按鈕上的一個動作，
$nextTick(() => $refs.closeBtn.focus())把動作拿走，
$nextTick(() => 動作)意思就是當DOM更新完成後，就會執行箭頭函式裡的動作，
另外要注意的點是$nextTick(() => 動作)是放在@click=""事件的引號裡面喔。