Changes to v-model, props, and events

This is a big change from Vue 2 that can and will break your code. In Vue 3, we no longer receive and emit the property value. Instead, any prop can be input/output, such as v-model. The default v-model attribute is received in a prop named modelValue, and the counterpart emit prepends update:, so it is called update:modelValue.

In Vue 3, we can now have multiple v-models at the same time. For example, we can have v-model:person="person" in our component, and define the prop as "modelPerson" and the event as "update:modelPerson".

Props and emits are now macros (a macro is a special function provided by the bundler or framework). Props have the same footprint as in Vue 2, so you can define them as arrays, objects, include types, default values, and so on.

Here is an example with a default v-model and a notated model:

const $props=defineProps(['modelValue','modelPerson']),
$emit=defineEmits...