Vue2转Vue3使用oruga-next时o-switch的v-model与watch不生效问题

你当前项目同时使用@vue/compat（Vue3兼容Vue2的构建版本）和Vue3专属UI库@oruga-ui/oruga-next，二者的自定义组件v-model规则不匹配，导致开关操作没有同步更新本地isSwitched变量，watch回调自然不会触发。
核心规则差异：

• Vue2 自定义组件v-model默认逻辑：向子组件传递value属性，监听子组件抛出的input事件更新绑定值
• Vue3 自定义组件v-model默认逻辑：向子组件传递modelValue属性，监听子组件抛出的update:modelValue事件更新绑定值
• @oruga-ui/oruga-next是纯Vue3实现，o-switch完全遵循Vue3的v-model规则，只识别modelValue属性、抛出update:modelValue更新事件
• @vue/compat默认开启Vue2兼容模式，会把模板里的v-model="isSwitched"按Vue2规则编译：给o-switch传value属性、只监听input事件，根本不会处理o-switch抛出的update:modelValue事件。点击开关时组件抛出的更新事件没有接收逻辑，本地isSwitched值始终是初始的true，watch永远监听不到变化。

二选一即可：

方案1：调整全局兼容配置，关闭v-model的Vue2兼容逻辑 #

在项目入口文件（通常是main.js）修改Vue的compat配置，强制v-model按Vue3规则编译：

import { createApp } from 'vue'
import App from './App.vue'
import Oruga from '@oruga-ui/oruga-next'
import '@oruga-ui/oruga-next/dist/oruga.css'

const app = createApp(App)
app.config.compatConfig = {
  // 其他你需要保留的Vue2兼容配置可以正常添加
  COMPONENT_V_MODEL: false // 关闭v-model的Vue2兼容行为
}
app.use(Oruga)
app.mount('#app')

修改后原有模板里的v-model="isSwitched"写法可以正常工作，watch会按预期触发。

方案2：不修改全局配置，显式写v-model绑定逻辑 #

不用v-model简写，手动绑定属性和更新事件，绕开compat的编译转换，直接适配o-switch的Vue3规则：

<template>
  <div class="home notification is-primary">
    <o-field>
      <o-switch 
        :modelValue="isSwitched" 
        @update:modelValue="val => isSwitched = val"
      >
        Audio: {{ isSwitched }} 
      </o-switch>
    </div>
  </div>
</template>

这种写法不需要改动全局配置，绑定逻辑完全显式，不受compat编译规则影响。

如果按上述修改后仍不生效，检查Oruga是否正确注册：Vue3版本的Oruga必须在入口文件通过app.use(Oruga)全局注册，否则o-switch会被识别为未知原生元素，虽然视觉上能显示，但所有组件事件、属性绑定都会失效。

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