Vue3 Plotly JS (Basic Chart Component)

PlotyChart.vue

<template>
    <div :id="id"></div>
</template>

<script>
import { ref, toRefs, watch, onMounted, onUnmounted } from "vue"
import { v4 as uuidv4 } from "uuid"

import Plotly from 'plotly.js-dist-min'

export default {
    props: {
        data: {
            type: Array
        },
        layout: {
            type: Object
        },
        config: {
            type: Object,
            required: false,
            default: null
        },
        id: {
            type: String,
            required: false,
            default: null
        }
    },
    setup(props) {
        const { data: data, layout: layout, config: propsConfig } = toRefs(props)
        const el = ref(null)

        var config = {
            displayModeBar: false,
            staticPlot: false,
            showLink: false,
            displaylogo: false,
            showEditInChartStudio: false,
            showTips: false,
            showAxisDragHandles: true,
            showAxisRangeEntryBoxes: true,
            editable:false,
            autosizable: false,
            scrollZoom: false,
            doubleClick: false,
            responsive: true
        }
        
        var tid = ""
        if(props.id) {
            tid = props.id
        } else {
            tid = uuidv4()
        }

        const id = tid

        config = Object.assign(config, propsConfig.value)

        onMounted(() => {
            let el = document.getElementById(id)
            Plotly.newPlot(el, data.value, layout.value, config)
            window.addEventListener('resize', onResize)
        })

        onUnmounted(() => {
            window.removeEventListener('resize', onResize)
        })

        const react = () => {
            Plotly.react(document.getElementById(id), data.value, layout.value, config)
        }

        const onResize = () => {
            Plotly.Plots.resize(document.getElementById(id))
        }

        watch([data, layout], (newData) => { react() })

        watch(propsConfig, (newConfig) => {
            console.log('changes', newConfig)
            config = Object.assign(config, newConfig)
        })

        return {
            id,
        }
    }
}
</script>