[Feat] Allow adding vue attributes and js code into elements

[benjie-git]

I would love to be able to use the vuegg editor to create simple, working apps, complete with specifying data for the app / components, and adding methods and code to be executed on events.

For example, I imagine adding a variable x as data for the app, then setting an input element's v-model value to x, and adding a text element with {{ x }} as its value. And then add a button called Clear with a click handler that just runs the code x = "".

So my feature requests are:

1. allow editing data and methods for each app / component (setting up variables)
2. allow inspecting each element and setting values like id, v-model, v-for, v-on:click etc.

One possible implementation for this would be a 4th side panel tab after Elements, Settings, and Pages, maybe named Inspect or Code or Vue. Or as an additional section in the Settings tab, alongside General, Text, Border.

[alxpez]

Yeah, that's clearly the next logical step, in terms of a big new feature. It was going to be part of the first iteration of vuegg, but it got discarded due to the complexity of how to deal with the complexity of having core-vuegg features co-living with custom-added-code... straight out of the top of my mind, I can see the platform breaking due to unexpected code clashes.

However I'd be most interested in seeing your proposed approach to this new feature, my guess is that a lot of the current vuegg's core implementation would need to be re-thought to accomodate this, since the current iteration was developed w/o it in mind.

Thanks for sharing @benjie-git, let's keep this alive!