Vue.js 生产模式下功能组件的奇怪行为

在我目前使用Nuxt和Vue制作的项目中，我遇到了一个奇怪的行为，即使用我不理解的功能组件。 实际上，我必须开发一个带有多个开关的菜单来激活或停用不同的选项。 以下是渲染之后的内容：

由于有多个菜单和每个菜单的多个选项，因此我开发了一个用于呈现标签和swith按钮的特定组件（SwitchOptions.vue）。在这个屏幕截图中，我用红色突出显示了SwitchOptions组件的渲染

以下是该组件的代码：

<template lang="pug">
  v-row(justify="center" align="center").ma-0.col-12
    v-subheader(class='primary--text') {{ label }}
    v-divider.mr-2(class='primary')
    v-switch(:input-value='model' @click='$emit("click")')
</template>

<script>
export default {
  props: {
    label: {
      type: String,
      default: '',
    },
    model: {
      type: Boolean,
      default: false,
    },
  },
};
</script>

v行（justify=“center”align=“center”）.ma-0.col-12
v-副标题（class='primary--text'）{{label}
v-divider.mr-2（class='primary'）
v型开关（：输入值='model'@click='$emit（“click”））
导出默认值{
道具：{
标签：{
类型：字符串，
默认值：“”，
},
型号：{
类型：布尔型，
默认值：false，
},
},
};

有了这段代码，一切都在开发和生产模式中正常工作

但是，为了提高应用程序的性能，我尝试使用以下代码使该组件正常工作：

<template lang="pug" functional>
  v-row(justify="center" align="center").ma-0.col-12
    v-subheader(class='primary--text') {{ props.label }}
    v-divider.mr-2(class='primary')
    v-switch(:input-value='props.model' v-on="listeners")
</template>

<script>
export default {
  props: {
    label: {
      type: String,
      default: '',
    },
    model: {
      type: Boolean,
      default: false,
    },
  },
};
</script>

v行（justify=“center”align=“center”）.ma-0.col-12
v-副标题（class='primary--text'）{{props.label}
v-divider.mr-2（class='primary'）
v开关（：input value='props.model'v-on=“侦听器”）
导出默认值{
道具：{
标签：{
类型：字符串，
默认值：“”，
},
型号：{
类型：布尔型，
默认值：false，
},
},
};

然后，在开发模式（npm run dev）下运行时，一切仍按预期工作。渲染仍然与上面的屏幕截图相同，并且开关表现完美

但是，在生产模式（npm运行构建和npm运行启动）下运行时，开关按钮不再显示：

=>有人能解释一下为什么在生产模式下不再显示开关按钮吗

提前谢谢

问候