TIL

Vue computed properties accept separate getter and setter

  • Vue.js
  • TypeScript

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.