fix(QRadio/QCheckbox/QToggle): doesn't work normally when value is not proxy object (#13467)

* fix(QRadio): doesn't work normally when value is not proxy object

Fixes #13457

* fix(QCheckbox): doesn't work normally when value is not proxy object

* perf(use-checkbox): compute toRaw(props.val) only once in "index"

Co-authored-by: Razvan Stoenescu <razvan.stoenescu@gmail.com>

Author: volvachev

ui/src/components/checkbox/use-checkbox.js

@@ -1,4 +1,4 @@
-import { h, ref, computed, getCurrentInstance } from 'vue'
+import { h, ref, computed, getCurrentInstance, toRaw } from 'vue'
 
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 import useSize, { useSizeProps } from '../../composables/private/use-size.js'
@@ -61,22 +61,23 @@ export default function (type, getInner) {
     props.val !== void 0 && Array.isArray(props.modelValue)
   )
 
-  const index = computed(() => (
-    modelIsArray.value === true
-      ? props.modelValue.indexOf(props.val)
+  const index = computed(() => {
+    const val = toRaw(props.val)
+    return modelIsArray.value === true
+      ? props.modelValue.findIndex(opt => toRaw(opt) === val)
       : -1
-  ))
+  })
 
   const isTrue = computed(() => (
     modelIsArray.value === true
       ? index.value > -1
-      : props.modelValue === props.trueValue
+      : toRaw(props.modelValue) === toRaw(props.trueValue)
   ))
 
   const isFalse = computed(() => (
     modelIsArray.value === true
       ? index.value === -1
-      : props.modelValue === props.falseValue
+      : toRaw(props.modelValue) === toRaw(props.falseValue)
   ))
 
   const isIndeterminate = computed(() =>

ui/src/components/radio/QRadio.js

@@ -1,4 +1,4 @@
-import { h, ref, computed, getCurrentInstance } from 'vue'
+import { h, ref, computed, getCurrentInstance, toRaw } from 'vue'
 
 import QIcon from '../icon/QIcon.js'
 
@@ -64,7 +64,7 @@ export default createComponent({
     const rootRef = ref(null)
     const { refocusTargetEl, refocusTarget } = useRefocusTarget(props, rootRef)
 
-    const isTrue = computed(() => props.modelValue === props.val)
+    const isTrue = computed(() => toRaw(props.modelValue) === toRaw(props.val))
 
     const classes = computed(() =>
       'q-radio cursor-pointer no-outline row inline no-wrap items-center'