Plotly 3D scatter plot is not working in Vue

I am trying to plot 3d scattered graph in Vue using plotly. Below is my component

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div id="myDiv"></div>
  </div>
</template>


<script>
import Plotly from 'plotly.js-dist'
export default {
  components: {
    Plotly
  },
  data() {return { }}
}
var trace1 = {
     x:[1], y:[2], z:[3],
    mode: 'markers',
    marker: {
        size: 12,
        line: {
        color: 'rgba(217, 217, 217, 0.14)',
        width: 0.5},
        opacity: 0.8},
    type: 'scatter3d'
}

var data = [trace1];
var layout = {margin: {
    l: 10,
    r: 10,
    b: 10,
    t: 10
  }};
Plotly.newPlot('myDiv', data, layout);
</script>

I am getting a blank page as a result. Also, the whole application goes down when this code runs. There are no errors displing as such.