[Vuejs]-Watch is not triggered when empty the ref object

The watch source (i.e., model.value) gets replaced in clear() with an empty object, so the watcher no longer gets triggered.

Solution

1. Instead of unwrapping the model ref, pass the ref itself as the watch source.

2. Pass the deep flag to the watch so that property addition/deletion is observed.

watch(
  model, 1️⃣
  (value) => { /* handle change */ },
  { deep: true } 2️⃣
)

demo