Deep Watch on Arrays

Hi 👋

I have to apologize for sending last week's issue three times. I'm sorry about that. I hope you still enjoyed the content.

I updated the Node version of my serverless functions that send the emails which somehow broke one of the functions. By manually triggering the function it somehow was executed three times. To address that issue I did a large refactoring on the serverless code and now it should be much more robust.

Anyways, I also have some good news: I reached another milestone for this newsletter, it now has 2000+ subscribers! 🎉 Thank you so much for your support!

Have a lovely week ☀️

To support me:

• 😘 Recommend the newsletter to your friends: it really helps!
• 💸 Sponsor the newsletter
• 🧵 Retweet the latest Twitter thread
• 📨 Reply to this email: feedback is welcome

In Vue 3, when using the watch option to watch an array, the callback will only trigger when the array is replaced. In other words, the watch callback is not triggered on array mutation.

Let's take a look at an example:

We have an array of users and a button to add a new user. When we click the button, the user is added to the array but the watch callback is not triggered.

To trigger the watcher on mutation, the deep option must be specified:

Now, when we click the button, the watch callback is triggered and the new user is logged to the console.

Try it yourself in the following StackBlitz project:

Until next week,