Почему мой файл .vue не находит JSON, который я пытаюсь передать?

Question

Может кто-нибудь просмотреть этот фрагмент кода и сказать мне, почему я получаю эту ошибку?

JSON не определен

(со ссылкой на тест: json ниже).

Я определил его, направил его на правильный компонент, и json выбирается правильно (я вижу весь объект в консоли). Так почему мой компонент не может отобразить это? Заранее спасибо всем пользователям vuejs, которые могут помочь мне с этим.

Файл .vue:

<template>
  <div id="app">
    {{ test }}
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      test: json
    }
  }
}
</script>

файл .js:

new Vue({
  el: '#app',
  data: () => ({
    json: {}
  }),
  created: function () {
    apigClient.invokeApi(apiPathParams, apiPathTemplate, apiMethod, apiAdditionalParams, apiBody).then((response) => {
      this.json = response
      console.log(this.json)
    })
  router,
  template: '<app/>',
  components: { App }
})

Answer 1

попробуйте передать эту json переменную как props или определить ее раньше export default{ ...

в main.js отправьте этот json дочернему компоненту следующим образом:

     ...
     template: '<app :json="json"/>'
     ...

в дочернем компоненте получите его как:

      export default {
       props:["json"],
        name: 'app',
         data () {
         return {
              test: this.json
       }
     }
    }