Switch - Update state when v-model changes

[swilla]

I created this codesandbox example of why I'm trying to do:

https://codesandbox.io/s/keen-raman-mlytlc

Essentially, we have a form that gets populated with the selected record to update. The Switch component gets the proper value, but visually does not change. If you have an enabled record, then you select a record that is disabled, it will still show in the UI as enabled. If you look at the data being bound to v-model, you can see that it is changing.

[swilla]

I was able to get this working by switching from ref to computed:

const enabled = computed(() => props.modelValue);

[swilla]

The computed property caused some errors when using the toggle switch itself. Using an uncontrolled component is the way that ended up working.

https://codesandbox.io/s/nifty-sound-qdvps5?file=/src/components/Toggle.vue:0-1448