Add a notice about defineModel to some pages

Author: skirtles-code

docs/components/checkbox.md

@@ -10,6 +10,10 @@ const checkboxValue = ref(true)
 </script>
 # Checkbox
 
+:::info
+This page has not yet been updated to use the `defineModel` macro, which was added in Vue 3.4. The techniques described here should still work, but in some cases it might be better to use `defineModel` instead.
+:::
+
 ## Checkbox Examples
 
 We're going to look at two examples of a checkbox component. The first example wraps a native `<input>` element to create the checkbox. The second example uses CSS to give the impression of a checkbox without using an `<input>`.

docs/components/radio-group.md

@@ -8,6 +8,10 @@ const options = ['First', 'Second', 'Third']
 </script>
 # Radio Group
 
+:::info
+This page has not yet been updated to use the `defineModel` macro, which was added in Vue 3.4. The techniques described here should still work, but in some cases it might be better to use `defineModel` instead.
+:::
+
 ## Radio Group Example
 
 A radio group component acts as a wrapper around multiple radio components, with a single `v-model` on the wrapper:

docs/components/radio.md

@@ -11,6 +11,10 @@ const options = ['First', 'Second', 'Third']
 </script>
 # Radio
 
+:::info
+This page has not yet been updated to use the `defineModel` macro, which was added in Vue 3.4. The techniques described here should still work, but in some cases it might be better to use `defineModel` instead.
+:::
+
 ## Radio Examples
 
 We're going to look at two examples of a radio component. The first example wraps a native `<input>` element to create the radio button. The second example uses CSS to give the impression of a radio button without using an `<input>`.

docs/components/tabs.md

@@ -3,6 +3,10 @@ import TabsExample from './tabs/example.vue'
 </script>
 # Tabs
 
+:::info
+This page has not yet been updated to use the `defineModel` macro, which was added in Vue 3.4. The techniques described here should still work, but in some cases it might be better to use `defineModel` instead.
+:::
+
 ## Tabs Example
 
 There are various ways to split a tabbed UI up into components. In this example we're going to use two components, an outer container called `tabs` and an inner container for each child called `tab`:

docs/components/toggle-switch.md

@@ -6,6 +6,10 @@ const switchValue = ref(true)
 </script>
 # Toggle Switch
 
+:::info
+This page has not yet been updated to use the `defineModel` macro, which was added in Vue 3.4. The techniques described here should still work, but in some cases it might be better to use `defineModel` instead.
+:::
+
 ## Toggle Switch Example
 
 Using a toggle switch should be very similar to using a checkbox:

docs/patterns/computed-v-model.md

@@ -3,6 +3,10 @@ import ProxyExample from './computed-v-model/proxy-example.vue'
 </script>
 # Computed with v-model
 
+:::info
+This page has not yet been updated to cover the `defineModel` macro, which was added in Vue 3.4. The techniques described here should still work, but in some cases it might be better to use `defineModel` instead.
+:::
+
 The principle of one-way data flow, with 'props down, events up', is just an extension of the idea that data should only be modified by its owner. This same idea can be extended to other scenarios, such as using Pinia, where the store is considered the owner of the data and so it should only be mutated by the store.
 
 This causes problems when working with `v-model`, which attempts to modify the value directly. One way we can address this is by using `computed()` with `get` and `set`.