Difference between watch() and watch:{}?

Question

I am new on VueJs3 and following a tutorial and I am confused about watch
From tutorial there used watch() but I used like watch: {} before so my question is what is the difference between them and how can I use following code inside watch: {} ?

watch(
  () => props.guessedLetters,
  (guessedLetters, prevGuessedLetters) => {
    keyboard.value.addButtonTheme(
      guessedLetters.miss.join(" "), 
      "miss"
    );
    keyboard.value.addButtonTheme(
      guessedLetters.found.join(" "), 
      "found"
    );
    keyboard.value.addButtonTheme(
      guessedLetters.hint.join(" "), 
      "hint"
    );
  },
  { deep: true }
);

Answer 1

There is no difference in how the watchers work. The watch() syntax is used in Composistion API and watch: {} syntax is used in Option API . The watcher you have (converted to Option API syntax) should look something like this:

watch: {
  guessedLetters: {
    handler(guessedLetters, prevGuessedLetters) {
      keyboard.value.addButtonTheme(
        guessedLetters.miss.join(" "), 
        "miss"
      );
      keyboard.value.addButtonTheme(
        guessedLetters.found.join(" "), 
        "found"
      );
      keyboard.value.addButtonTheme(
        guessedLetters.hint.join(" "), 
        "hint"
      );
    },
    deep: true
  }
}