Use javascript

Use javascript callback for element, it is used in cases: init slider, active a tab, click to add to cart...etc...

Register javascript via a computed

It required a core mixin "Javascript" and return as a function() { ... }

Element.vue

<template>
    <div ref="wrapper">
        <h1>Hello Beae!</h1>
    </div>
</template>

<script>
    import { Javascript } from '@/components/RightSide/Builder/Helpers/Core.js';
    export default {
        
        name: 'ElementName',
        mixins: [ Javascript ],
        props: {
            'data': {
                type: Object,
                default () {
                    return {};
                }
            }
        },

        computed: {
             javascript () {
                return function() {
                    
                    // this.$el   <-- return html root of element
                    // this.$refs <-- return all refs
                    // this.abc   <-- return data.settings.abc 
                    
                    this.$el.querySelector('h1').addEventListener('click', () => {
                        alert('click me!');
                    });
                    
                };
            },
        }
        
    }
</script>