Problems Vue js and api

As you are a bit confused about how to perform this process, I will add a base example for these requests and how to render through components using Single File Component , all this using the API in heroku

First you must have an input file to configure vue-router with their respective routes. It would have the following content.

Index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

import  index from './components/index';
import  places from './components/places';

//Definimos las rutas y los componentes respectivos
const routes = [
    { path: '/', component: index },
    { path: '/places/:id', component: places , name :'pokemonunico'}
]

const router = new VueRouter({
  routes
})

const app = new Vue({
  router,
}).$mount('#app')

Then the index.js components, I added a% basic% co with nav , we obtain the data from the API, and iterate with bootstrap 4 and create the v-for .

<template>

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">API VueJs</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
                 <router-link to="/" class="nav-link">Inicio</router-link>
              </li>
              <!-- Enlaces a cada uno de los items obtenidos desde la API
              para el parámetro se emplea el método getId para retornar la última parte
              de la URl para posteriromente hacer la Petición -->
              <li v-for="item in items"  class="nav-item"><router-link  class="nav-link" :to="{ name: 'pokemonunico', params: { id: getId(item.url) }}" >{{item.name}}</router-link></li>
        </ul>
      </div>
    </nav>


</template>

<script>
    export default {
        name: 'index',
        data () {
            return {
                items : []
            }
        },
        created(){
            var vm = this;
            axios.get('https://adventuretimeapi.herokuapp.com/places/')
            .then(function(response){
                // Asignamos el Array retornado
                vm.items = response.data;
            }).catch(function (error) {
                console.log(error);
            });
        },
        methods : {
            // método para obtener la última parte de la URL
            getId : function(item){
                let url = item.split('/');
                return  url.pop() || url.pop();
            }
        }
    }
</script>

And finally the component places.js , access to data is basic. from that in the array route-link you will have everything that returns your item , and you can access the properties you want or create more components.

<template>

    <div>
        <div v-if="item.length ===0"> Cargando...</div>
        <div v-if="item.length !==0">
            <h5> Nombre </h5> 
            <p>{{ item.name}}</p>
            <h5> Residentes </h5> 
            <ul>
                <li v-for="el in item.residents">{{ el}}</li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'places',
        data () {
            return {
                item : []
            }
        },
        created(){
            var vm = this;
            // Obtenemos la información de ese id pasado por parámetro
            // y se le asigna al array item , con esto ya podrá acceder a todas 
            // las propiedades del Array
            axios.get('https://adventuretimeapi.herokuapp.com/places/' + this.$route.params.id)
            .then(function(response){
              vm.item = response.data;
            }).catch(function (error) {
                console.log(error);
            });
        }
    }
</script>

As additional information if you use API you will know that there is a Laravel file where you import bootstrap.js and others, it will be necessary to add a configuration for the axios , adding a new key of the one that already exists .

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
window.axios.defaults.headers.common['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf8';

And remove or comment where the headers is added to the headers since it is not necessary, that is

window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;