Calling a function upon change to a reactive variable - a watcher - will it be a feature?

[1sd15]

Hey there!

So I've worked with Vue alot a little bit ago but more recently I've been assigned to more PHP and teaching work. I found the need for a reactive calendar and I wanted to use a light version of Vue to manage this and that's when I found Vue Petite! The more simplistic object way of making components threw me a little but I personally think I'll find teaching the more simplistic format easier.

I've setup and worked on a little calendar integration and it works well. I have a "currentDate" property and gets mutated by some setters triggered by some buttons. After the mutation I then call another function to refresh my array of dates and then that reactively updates the frontend.

I want to make a little bit of my code simpler. I believe that I could have a watcher bound to the "currentDate" property which would then refresh my array of dates and reactively update the frontend. This would reduce the amount of load and repeated code within my setters.

What do you think?
Am I missing something and is this possible already?
Thanks!

[solution-loisir]

Would v-effect be what you're looking for? https://github.com/vuejs/petite-vue#v-effect

[1sd15]

I gave that a read earlier and I don't think it'll quite do it. That happens on a per-element basis from what I understand. I'd have to add the v-effect to each trigger and then it'd basically be the same as I currently have done it but half in the DOM

[solution-loisir]

I'm not sure about the "per element basis". What I experimented so far is that v-effect keeps track of the reactive data included in the function attached to it. It could be placed anywhere on the markup as I understand it. From the docs:

The effect uses count which is a reactive data source, so it will re-run whenever count changes.

[1sd15]

Hmm okay - I'll give that a try and update this soon - cheers!