title: How to bring this function out of methods inside this Vue component?
body: <p>I have this Vue component BarChart.vue which is from
  <a href="https://github.com/apexcharts/vue3-apexcharts" rel="nofollow noreferrer">https://github.com/apexcharts/vue3-apexcharts</a></p>
  <p>The script portion of this component is as follows;</p>
  <pre><code>&lt;script&gt;
  /* eslint-disable */
  
  export default {
    name: &quot;BarExample&quot;,
    data: function() {
      return {
        chartOptions: {
          plotOptions: {
            bar: {
              horizontal: true
            }
          },
          xaxis: {
            categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
          }
        },
        series: [
          {
            name: &quot;series-1&quot;,
            data: [30, 40, 45, 50, 49, 60, 70, 91]
          }
        ]
      };
    },
    methods: {
      updateChart() {
        const max = 90;
        const min = 20;
        const newData = this.series[0].data.map(() =&gt; {
          return Math.floor(Math.random() * (max - min + 1)) + min;
        });
  
        const colors = [&quot;#008FFB&quot;, &quot;#00E396&quot;, &quot;#FEB019&quot;, &quot;#FF4560&quot;, &quot;#775DD0&quot;];
  
        // Make sure to update the whole options config and not just a single property to allow the Vue watch catch the change.
        this.chartOptions = {
          colors: [colors[Math.floor(Math.random() * colors.length)]]
        };
        // In the same way, update the series option
        this.series = [
          {
            data: newData
          }
        ];
      }
    }
  };
  &lt;/script&gt;
  </code></pre>
  <p>I want to bring updateChart() out of methods such that it is a separate function by itself.</p>
  <p>This is what I did;</p>
  <pre><code>&lt;script&gt;
  /* eslint-disable */
  
  export default {
    name: &quot;BarExample&quot;,
    data: function() {
      return {
        chartOptions: {
          plotOptions: {
            bar: {
              horizontal: true
            }
          },
          xaxis: {
            categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
          }
        },
        series: [
          {
            name: &quot;series-1&quot;,
            data: [30, 40, 45, 50, 49, 60, 70, 91]
          }
        ]
      };
    },
    methods: {
      updateChart(),
    }
  };
  
  updateChart() {
        const max = 90;
        const min = 20;
        const newData = this.series[0].data.map(() =&gt; {
          return Math.floor(Math.random() * (max - min + 1)) + min;
        });
  
        const colors = [&quot;#008FFB&quot;, &quot;#00E396&quot;, &quot;#FEB019&quot;, &quot;#FF4560&quot;, &quot;#775DD0&quot;];
  
        // Make sure to update the whole options config and not just a single property to allow the Vue watch catch the change.
        this.chartOptions = {
          colors: [colors[Math.floor(Math.random() * colors.length)]]
        };
        // In the same way, update the series option
        this.series = [
          {
            data: newData
          }
        ];
      }
    }
  &lt;/script&gt;
  </code></pre>
  <p>I received an error <code>Parsing error: Unexpected token ,</code></p>
  <p>I am using vue3 and apexcharts.</p>