Component does not update

Question

I’m creating a Plotly Graph Vue component. On initial loading the component is loaded with the correct initial values, but when updated the property of the component, it is not updated.

Component:

<template>
    <div
    ref="plot1"
    id="plot1"
    ></div>
</template>

<script>
  import * as Plotly from 'plotly.js'

  export default {
    name: 'graph',
    props: ['plot_data'],
    data: function () {
      return {
        data_plot: this.plot_data,
        layout: { },
      }
    },
    methods: {

    },
    mounted () {
      Plotly.plot(this.$refs.plot1, this.data_plot, this.layout, { displayModeBar: false })
    },
  }

</script>

Page inserting the component:

<graph
              :plot_data="data_plot"
              :layout="layout"
              :display-mode-bar="false"
></graph>

import graph from './component/Graph.vue'

...

data () {
      return {
      ....
        data_plot: [{ x: [3, 2, 1], y: [3, 2, 1], type: 'scatter' }],
      }
    },
    
      send_site: function () {
        console.log(this.$refs.tuple_ann.value)
        var data = new FormData()
        ....
        axios.post('http://localhost:8000/api_app/ann/', data, { headers: { 'Content-Type': 'multipart/form-data' } })
          .then((response) => {
            ....
            this.data_plot = [{ x: response.data.x, y: response.data.y, type: 'scatter' }]
          })
      },

The data_plot variable is updated correctly after the request, but the "Graph" component is not updated. What could it be? Thank you.

Answer 1

I solved the problem by adding the key="data_plot" attribute to .

<graph
  :plot_data="data_plot"
  :key="data_plot"
  :layout="layout"
  :display-mode-bar="false"
></graph>