Vue computed properties accept separate getter and setter
Most people only use computed as a getter, but it also accepts a setter — which removes the need for watch + auxiliary variable in many input scenarios:
const fullName = computed({
get() {
return `${firstName.value} ${lastName.value}`;
},
set(value: string) {
const [first, ...rest] = value.split(" ");
firstName.value = first;
lastName.value = rest.join(" ");
},
});
Now v-model="fullName" works directly on an input with no watcher.