在Vue的mounted中仍然加载渲染不出echarts的方法问题

<template>
  <div>
    <div ref="echarts"></div>
  </div>
</template>
 
<script>
  export default {
    mounted () {
      console.log(this.$$refs.echarts);  // undefined
    },
  }
</script>

    methods: {
      initEcharts() {
        echarts.init(this.$refs.echarts).setOption(option);
      }
    },
    updated() {
      this.initEcharts();
    }

<template>
  <div>
    <div ref="echarts" v-init="option"></div>
  </div>
</template>
 
<script>
import * as echarts from 'echarts';
  export default {
    data() {
      return {
        option: {
          title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
        }
      }
    },
    directives: {
      init: {
        // inserted: 在dom元素成功插入父节点时的钩子函数
        inserted(el, binding) {
          echarts.init(el).setOption(binding.value);
        }
      }
    },
  }
</script>

    methods: {
      initEcharts() {
        echarts.init(this.$refs.echarts).setOption(option);
      }
    },
    mounted () {
      setTimeout(() => {
        this.initEcharts();
      }, 500)
    },