Manifest v3 Chrome扩展中AlpineJS CSP构建的DOM更新异常问题

按照AlpineJS官方CSP构建指南构建CSP兼容库并引入Chrome扩展设置页面后，出现以下异常：

• Alpine数据已执行（Alpine.data定义的counter已加载）
• 点击按钮无响应，increment方法未触发
• x-text绑定的文本未显示
• 控制台未抛出任何CSP相关错误，疑似Alpine未正确更新DOM

settings.html #

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Settings</title>
    <script src="alpine.js" defer></script>  <!-- 基于CSP构建的库文件 -->
</head>
<body>
    <div x-data="counter">
        <button @click="increment">Increment</button>
        <span x-text="count"></span>
    </div>
    <script src="settings.js" defer></script>
</body>
</html>

settings.js #

// 这段代码已执行，但increment方法从未触发
Alpine.data('counter', () => ({
    count: 1,
    increment() {
        console.log('clicked');
        this.count++;
    }
}))

内容的提问来源于stack exchange，提问作者lucuma