Use css base

Defined the css base for an element, it will be loaded only once no matter how many copies you use.

Register css via a computed

This css will be use for all copies of this element, so do not use internal variables in this. And it required a core mixin "Element"

Element.vue

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

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

        computed: {
             css () {
                return `
                    h1 {
                        font-size: 2rem;
                        margin: 0.5rem 0;
                    }
                `;
            },
        }
        
    }
</script>