title: How to pass VueJS data to another script?
body: <p>I'm converting an established site over to VueJS but hit a stumbling block on the best way to achieve this.</p>
  
  <p>It's using D3-Funnel (<a href="https://github.com/jakezatecky/d3-funnel" rel="nofollow noreferrer">https://github.com/jakezatecky/d3-funnel</a>) to draw a funnel chart but how do I pass VueJS data variables to the charts constructor?</p>
  
  <pre><code>&lt;script&gt;
  const data = [
      { label: 'Step 1', value: this.step1 },
      { label: 'Step 2', value: this.step2 },
      .......
  ];
  const options = {
      block: {
          dynamicHeight: true,
          minHeight: 15,
      },
  };
  
  const chart = new D3Funnel('#funnel');
  chart.draw(data, options);
  &lt;/script&gt;
  </code></pre>
  
  <p>So I need to pass vue data variables into the values. My first thought is to move this into it's own function in the VueJS methods object and use the variables there using <code>this</code>.</p>
  
  <p>Is there a better way of achieving this?</p>
  
  <p>---------- Edit -------------</p>
  
  <p>As per comments people wanted to see how I achieved this currently in vue. As already mentioned above I just created a function in the vue methods object and then call it.</p>
  
  <pre><code>methods : {
      drawChart(){
          const data = [
              { label: 'Step 1', value: 99999 },
              { label: 'Step 2', value: 9999 },
              .......
          ];
          const options = {
              block: {
                  dynamicHeight: true,
                  minHeight: 15,
              },
          };
  
          const chart = new D3Funnel('#funnel');
          chart.draw(data, options);
      }
  },
  mounted(){
      this.drawChart();
  }
  </code></pre>
  
  <p>Data is coming from an API and put into the vue data object.</p>
  
  <pre><code>data:{
      step1: 0,
      step2: 0,
      ....
  },
  methods:{
      getData(){
          axois.post......
          response{
              this.step1 = response.data.step1
              this.step2 = response.data.step2
              ....
          }
      }
  }
  </code></pre>