剧情Vue TypeError：vue_plotly__WEBPACK_IMPORTED_MODULE_1 __。Plotly.newPlot不是函数

Question

我是Vue和Javascript的初学者

在这段代码中，数据是不断通过套接字io从服务器发送的，它们是随机生成的数字

<div class="chart">
      <h1>{{ data }}</h1>
      <h1>{{ value }}</h1>
</div>

在h1中，服务器中的数据和值值是随机值。

但是我不知道如何更新图中的值。 请帮帮我。我尝试了newPlot和react方法，但是没有用。

<template>
  <div class="chart-wrapper">
    <Plotly
      v-bind:data="data"
      div-id="plot"
      :layout="layout"
      :display-mode-bar="false"
    ></Plotly>
    <div class="chart">
      <h1>{{ data }}</h1>
      <h1>{{ value }}</h1>
    </div>
  </div>
</template>
<script>
import { Plotly } from 'vue-plotly'
import io from 'socket.io-client'
const socket = io('http://localhost:8081')
export default {
  components: {
    Plotly
  },
  data() {
    return {
      value: 2,
      data: [
        {
          x: [1, 2, 3, 4],
          y: [11, 1, 1, 16],
          type: 'scatter'
        }
      ],
      layout: {
        title: 'My graph'
      }
    }
  },
  created() {
    socket.on('Cartesian_Pose', data => {
      var _temp = JSON.parse(JSON.stringify(data))
      this.value = _temp.X
      this.data[0].y[0] = Number(_temp.X)
      this.data[0].y[1] = Number(_temp.Y)
      this.data[0].y[2] = Number(_temp.Z)
      this.data[0].y[3] = Number(_temp.A)
      Plotly.newPlot('plot', this.data, this.layout)
      console.log(this.data, data)
    })
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/mixin/variables.scss';

.chart-wrapper {
  width: 100%;
  height: 700px;
}
</style>

我越来越 TypeError：vue_plotly__WEBPACK_IMPORTED_MODULE_1 __。Plotly.newPlot不是函数