@nuxtjs/deviceでデバイス毎のレイアウトの切り替えが出来ない

Nuxt.jsで静的サイトを制作しております。

スマホとPCでデザインを分けたく、@nuxtjs/deviceというモジュールを入れました。

ローカルで使用している時はちゃんと機能しているのですが、Firebase Hostingにデプロイしてみたところスマホで開いてもパソコンで開いてもスマホ用のレイアウトが表示されてしまいます。

layoutフォルダにはdefault.vue、mobile.vue、error.vueが入っており、PCではdefault.vueを使用しスマホではmobile.vueを使用するようにしたいです。

レイアウトを切り替えたいpages/index.vueの該当部分のコードは以下の通りです。★1、★2の両パターン試してみましたが、どちらも結果は同じでした。

vue
1
2<script>
3export default {
4  // layout: (ctx) => (ctx.isMobile ? 'mobile' : 'default'),  ★1
5  layout({ app }) {                                        // ★2
6    return app.$device.isDesktop ? 'mobile' : 'default'
7  },
8}
9</script>

念のためnuxt.config.jsのソースも掲載しておきます。

nuxt.config.js
1import colors from 'vuetify/es5/util/colors'
2
3export default {
4  /*
5   ** Nuxt rendering mode
6   ** See https://nuxtjs.org/api/configuration-mode
7   */
8  mode: 'universal',
9  /*
10   ** Nuxt target
11   ** See https://nuxtjs.org/api/configuration-target
12   */
13  target: 'static',
14  /*
15   ** Headers of the page
16   ** See https://nuxtjs.org/api/configuration-head
17   */
18  head: {
19    title: 'Sample App',
20    meta: [
21      { charset: 'utf-8' },
22      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
23      {
24        hid: 'description',
25        name: 'description',
26        content: process.env.npm_package_description || '',
27      },
28    ],
29    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
30  },
31  /*
32   ** Global CSS
33   */
34  css: [{ src: '~assets/font.scss' }],
35  /*
36   ** Plugins to load before mounting the App
37   ** https://nuxtjs.org/guide/plugins
38   */
39  plugins: [],
40  /*
41   ** Auto import components
42   ** See https://nuxtjs.org/api/configuration-components
43   */
44  components: true,
45  /*
46   ** Nuxt.js dev-modules
47   */
48  buildModules: [
49    // Doc: https://github.com/nuxt-community/eslint-module
50    '@nuxtjs/eslint-module',
51    '@nuxtjs/vuetify',
52  ],
53  /*
54   ** Nuxt.js modules
55   */
56  modules: [
57    // Doc: https://axios.nuxtjs.org/usage
58    '@nuxtjs/axios',
59    ['vue-scrollto/nuxt', { duration: 2000 }],
60    [
61      '@nuxtjs/device',
62      {
63        defaultUserAgent:
64          'Mozilla/5.0 (Linux; Android 5.1.1; Nexus 6 Build/LYZ28E) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.39 Mobile Safari/537.36',
65      },
66    ],
67  ],
68  /*
69   ** Axios module configuration
70   ** See https://axios.nuxtjs.org/options
71   */
72  axios: {},
73  /*
74   ** vuetify module configuration
75   ** https://github.com/nuxt-community/vuetify-module
76   */
77  vuetify: {
78    customVariables: ['~/assets/variables.scss'],
79    theme: {
80      dark: false,
81      themes: {
82        dark: {
83          primary: colors.blue.darken2,
84          accent: colors.grey.darken3,
85          secondary: colors.amber.darken3,
86          info: colors.teal.lighten1,
87          warning: colors.amber.base,
88          error: colors.deepOrange.accent4,
89          success: colors.green.accent3,
90        },
91      },
92    },
93  },
94  /*
95   ** Build configuration
96   ** See https://nuxtjs.org/api/configuration-build/
97   */
98  build: {
99    // extend(config, ctx) {
100    //   config.output.publicPath = '/_nuxt/'
101    // },
102  },
103}
104

なぜ本番環境だけ動作しないのか全く見当がつきません。
お知恵をお貸しいただけると助かります。

追記

使用しているnuxtのバージョンが2.13.0で、nuxt buildした後nuxt exportしたものをfirebase deployしております。

firebase.jsonは以下の通りです。

json
1{
2  "hosting": {
3    "public": "dist",
4    "ignore": [
5      "firebase.json",
6      "**/.*",
7      "**/node_modules/**"
8    ]
9  }
10}

package.jsonのコードも載せておきます。

{
  "name": "sample app",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "export": "nuxt export",
    "serve": "nuxt serve",
    "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "lint": "yarn lint:js"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.11.0",
    "@nuxtjs/device": "^1.2.7",
    "firebase-tools": "^8.4.3",
    "nuxt": "^2.13.0",
    "vue-scrollto": "^2.18.1"
  },
  "devDependencies": {
    "@nuxtjs/eslint-config": "^3.0.0",
    "@nuxtjs/eslint-module": "^2.0.0",
    "@nuxtjs/vuetify": "^1.11.2",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.2.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-nuxt": "^1.0.0",
    "eslint-plugin-prettier": "^3.1.4",
    "prettier": "^2.0.5"
  }
}