Пытаюсь подключить плагин echarts, но постоянно ошибка. Подскажите, что не так делаю?

Мне кажется, что я не так подключил плагин. Подскажите в чем моя ошибка.. Пытаюсь установить вот этот плагин https://www.npmjs.com/package/vue3-echarts

Ошибка:

error  in ./src/components/vue3-echarts.vue?vue&type=template&id=8e0cf4ac&scoped=true

Module Error (from ./node_modules/vue-loader-v16/dist/templateLoader.js):

VueCompilerError: v-bind is missing expression.
at C:\Users\Vladik\Desktop\btc3\src\components\vue3-echarts.vue:2:15
1  |  <template>
2  |  <vue-echarts  : option = " option " style = " height: 500px " ref = " chart " />
   |                 ^
3  |  </template>
4  |  

Данные:

vue3-echarts.vue

<template>
<vue-echarts  : option = " option " style = " height: 500px " ref = " chart " />
</template>

<script>
    export default {
        name: 'vue3-echarts',
option: {
    dataset: [{
        source: [
            [1, 4862.4],
            [2, 5294.7],
            [3, 5934.5],
            [4, 7171.0],
            [5, 8964.4],
            [6, 10202.2],
            [7, 11962.5],
            [8, 14928.3],
            [9, 16909.2],
            [10, 18547.9],
            [11, 21617.8],
            [12, 26638.1],
            [13, 34634.4],
            [14, 46759.4],
            [15, 58478.1],
            [16, 67884.6],
            [17, 74462.6],
            [18, 79395.7]
        ]
    }, {
        transform: {
            type: 'ecStat:regression',
            config: {
                method: 'exponential',
                // 'end' by default
                // formulaOn: 'start'
            }
        }
    }],
    title: {
        text: '1981 - 1998 gross domestic product GDP (trillion yuan)',
        subtext: 'By ecStat.regression',
        sublink: 'https://github.com/ecomfe/echarts-stat',
        left: 'center'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        }
    },
    xAxis: {
        splitLine: {
            lineStyle: {
                type: 'dashed'
            }
        }
    },
    yAxis: {
        splitLine: {
            lineStyle: {
                type: 'dashed'
            }
        }
    },
    series: [{
        name: 'scatter',
        type: 'scatter',
        datasetIndex: 0
    },{
        name: 'line',
        type: 'line',
        smooth: true,
        datasetIndex: 1,
        symbolSize: 0.1,
        symbol: 'circle',
        label: { show: true, fontSize: 16 },
        labelLayout: { dx: -20 },
        encode: { label: 2, tooltip: 1 }
    }]
}
    }

</script>

<style scoped>
</style>

Импортирую компонент сюда

v-recommended.vue

<template>
  <div class="v-recommended pt-6">
    <v-header-forms />

    <div class="grap-table flex justify-between w-full mt-10">
      <div class="graph w-1/2">
        <h1>
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint
          distinctio tenetur numquam voluptas nihil non quo nulla. Ratione dolor
          tenetur architecto distinctio facilis. Expedita, quia placeat dolor
          distinctio laudantium dolorem?
        </h1>
      </div>
      <vue3-echarts />
      <v-call-spread-right />
    </div>
  </div>
</template>

<script>
import vHeaderForms from "./v-header-forms";
import vCallSpreadRight from "./v-call-spread-right";
import { VueEcharts } from './vue3-echarts.vue';

export default {
  name: "v-recommended",
  components: {
    vHeaderForms,
    vCallSpreadRight,
    VueEcharts,
  },
  props: {},
  data() {
    return {};
  },
  computed: {},
  methods: {},
  watch: {},
};
</script>

<style lang="scss" scoped>
</style>