How can I replace all camel case strings with kebab case strings in vscode with find and replace

Question

I have a large collection of html files for a vue project that currently have inconsistent prop usage

some props are v-bind:prop-name="" some are v-bind:propName="" and some use the short hand :prop-name="" or :propName="".

and I would like to replace all props with the :prop-name="" syntax as per the vue docs.

I know that you can use regex in vscode (or a similar editor) to select only props with a camelCase format but im having a few issues.

for the find regex I cant figure out how to:

1. select v-bind: or : as a prefix AND exclude it from a selection group
2. split the camelCased string into selection groups
3. dealing with propNameWithMoreThanTwoWords

for the replace syntax im pretty sure I have the right syntax :\L$1-$2=" from what I have found on other editors replace syntax but Id like some help on this too.

Totally ok with it being multiple passes to try get everything in the same format before the final update too.

im not adverse to using a different editor or somthing like a codemod (though I use windows)