Dead simple way to mount pickr with vue.

ColorComponent.vue

<template>
    <div>
        <input type="hidden" name="color" v-model="color">

        <div class="flex flex-row items-center">
            <div class="color-picker h-16 w-16 rounded shadow"></div>

            <div class="ml-2 text-neutral-200">
                <div class="flex flex-col text-sm">
                    <span>Color:</span>
                    <span>Choose a color.</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import '@simonwep/pickr/dist/themes/nano.min.css';
    import Pickr from '@simonwep/pickr';

    export default {
        name: "ColorComponent",
        data() {
            return {
                pickr: null,
                color: null
            }
        },

        mounted() {
            this.pickr = Pickr.create({
                el: '.color-picker',
                theme: 'nano', // or 'monolith', or 'nano'

                swatches: [
                ],

                components: {

                    // Main components
                    preview: true,
                    opacity: false,
                    hue: true,

                    // Input / output Options
                    interaction: {
                        hex: true,
                        rgba: false,
                        hsla: false,
                        hsva: false,
                        cmyk: false,
                        input: true,
                        clear: true,
                        save: true
                    }
                }
            });

            this.pickr.on('save', (color, instance) => {
                this.color = color.toHEXA().toString();
            });
        }
    }
</script>

<style scoped>

</style>