javascript - Vue + Vuex プロジェクトに Vega チャートを埋め込もうとすると、キャッチされないエラーが発生します

Question

Vue.js (状態管理用の vuex と一緒に) プロジェクト内でvega-embedを使用しようとしています。基本的に、バックエンドは Vega json オブジェクトを提供します。これは、クリック イベントで HTTP GET 要求を介してフロントエンドによって取得されます。ただし、プロットを表示するには 2 回クリックする必要があり、最初のクリック イベントでは常にエラー " Uncaught (in promise) TypeError: Cannot read property '$schema' of null" が発生します。誰かがデバッグを手伝ってくれますか? 非常に高く評価。詳細を以下に示します。

vue コンポーネント ファイル:

<template>
  <button @click.native="fetchCars(); displayVegaPlot()">fetch cars</button>
  <div id="vega-example"></div>
</template>

<script>
  import {default as vegaEmbed} from 'vega-embed'
  import {
  mapState
} from 'vuex'

  export default {
    name: 'VegaExample',
    props: {
      component_msg: String
    },
    methods: {
      fetchCars () {
        this.$store.dispatch('fetchCars')
      },
      displayVegaPlot () {
        vegaEmbed('#vega-example', this.vega_cars, {actions: false})
      }
    },
    computed: {
    ...mapState([
      'vega_cars'
    ])
    }
  }
</script>

...そしてストアjsファイル：

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)

export default new Vuex.Store({
  strict: true,
  state: {
    error: '',
    vega_cars: null
  },

  mutations: {
    SET_CARS: (state, cars) => {
      state.vega_cars = cars
    },
    SET_ERROR: (state, error) => {
      state.error = error
    }
   }

  actions: {
    fetchCars: (context) => {
      axios.get(`vega_cars`)
        .then(response => context.commit('SET_CARS', response.data))
        .catch(error => context.commit('SET_ERROR', error))
    }
  }