[Vuejs]-Vue js access data from seperate component , how to?

Return the data pokemon:[], import app vue inside api vue component, then pass the data as props on the html app vue component so you can access it on app vue component like the code below.

API.vue

<template>
  <app>
     v-for="poke in pokemon" 
     :key="poke.id"
     :poke="poke">
  </app>

  <div class="hello">
    {{ pokemon }}
  </div>
</template>

<script>
import axios from 'axios'
import APP from './App.vue'

export default {
  name: 'HelloWorld',
  data () {
    return {
      pokemon: []
    }
  },

  components: {
      'app': APP
  },

  created () {
    axios.get('https://pokeapi.co/api/v2/pokedex/kanto/')
      .then(response => {
        console.log(response)
        this.pokemon = response.data
      })
      .catch(err => {
        console.log(err)
      })
  }
}
</script>

<style scoped></style>

App.vue

<template>
  <div id="app">
    <vue-query-builder
      :rules="rules"
      v-model="query">
    </vue-query-builder>
    <Api/>

    <p>Generated output : {{questions}}</p>

    <pre>{{ JSON.stringify(this.query, null, 2) }}</pre>

     <p>{{poke.id}}</p> // render pokemon data id
  </div>
</template>

<script>
import VueQueryBuilder from "vue-query-builder";
import HelloWorld from "./components/HelloWorld";
import Api from "./components/Api";

export default {
  name: "App",
  components: {
    VueQueryBuilder,
    HelloWorld,
    Api 
  },

  props: ['poke'], // new line of code data from api.vue

  data() {
    return {
      rules: [
        {
          type: "select",
          id: "vegetable",
          label: "Question",
          choices: [
            { label: "Apple", value: "apple" },
            { label: "Banana", value: "banana" }
          ]
        },
        {
          type: "radio",
          id: "fruit",
          label: "Fruit",
          choices: [
            { label: "Apple", value: "apple" },
            { label: "Banana", value: "banana" }
          ]
        }
      ],

       query: {
        "logicalOperator": "All",
        "children": [
          {
            "type": "query-builder-group",
            "query": {
              "logicalOperator": "Any",
              "children": [
                {
                  "type": "query-builder-rule",
                  "query": {
                    "rule": "vegetable",
                    "selectedOperator": "contains",
                    "selectedOperand": "Vegetable",
                    "value": null
                  }
                },
                {
                  "type": "query-builder-rule",
                  "query": {
                    "rule": "fruit",
                    "selectedOperand": "Fruit",
                    "value": "banana"
                  }
                }
              ]
            }
          }
        ]
      }
    };
  }
};
</script>