Настраивать структуру Хсон Ларавэль

Я изучаю Vuejs, я приобрел один сдержись уже готовый со стартером - дистрибутивом инициализироваться под разработкой, проблема состоит в том, что у моего json нет структуры, которая требует компонента, а именно заключает данные внутри параметров, что я не знаю, как перемещать их для того, чтобы они остались такими:

Компонент требует данных в таком Json:

pages: {
    key: "title",
    data: [
      {title: 'Home',   url: '/',      icon: 'HomeIcon', is_bookmarked: true},
      {title: 'Page 2', url: '/page2', icon: 'FileIcon', is_bookmarked: false},
    ]
  }

Но laravel он экспортирует их из этой формы:

{
    current_page: 1,
    data: [
      {
        id: 1,
        user_id: '1',
        title: 'Home',
        url: '/app/home',
        icon: 'HomeIcon',
        is_bookmarked: 'false',
        created_at: '2019-12-22 11:35:57',
        updated_at: '2019-12-22 11:35:59'
      },
      {
        id: 3,
        user_id: '1',
        title: 'Users',
        url: '/app/user/user-list',
        icon: 'UserIcon',
        is_bookmarked: 'false',
        created_at: '2019-12-22 11:37:44',
        updated_at: '2019-12-22 11:37:46'
      }
    ],
    first_page_url: 'http://emplenio.test/api/v1/pages?page=1',
    from: 1,
    last_page: 1,
    last_page_url: 'http://emplenio.test/api/v1/pages?page=1',
    next_page_url: null,
    path: 'http://emplenio.test/api/v1/pages',
    per_page: 15,
    prev_page_url: null,
    to: 2,
    total: 2
}

Еще с этой структурой я могу отображать данные с инструмента desarollo Vuejs для chrome, больше он не вносит в список их, потому что структура не правильная и меня бросает ошибка:

[Vue warn]: Invalid prop: type check failed for prop "data". Expected Object, got Array 

здесь я оставляю screen, как он был бы должен получать данные компонент и Здесь, как он получает их

Код драйвера api - следующий:

class NavbarSearchAndPinlistController extends Controller
{
    public function index()
    {
        $query = NavbarSearchAndPinlist::where('user_id', '1');
        $pages = $query->paginate();
        if(request()->wantsJson())
        {
            return $pages;
        }
        return view('partials.failed');
    }
}

и тот дополнения такой:

<script>
import VxAutoSuggest from '@/components/vx-auto-suggest/VxAutoSuggest.vue';
import axios from 'axios';

export default {
  components: {
    VxAutoSuggest
  },
  data() {
    return {
      navbarSearchAndPinList: [],
      showFullSearch: false,
    }
  },
    mounted(){
        axios.get('/api/v1/pages')
            .then(res => {
                this.navbarSearchAndPinList = res.data.data;
            })
            .catch(err => {
                console.log(err);
            });

    },
  methods: {
    selected(item) {
      item.pages ?  this.$router.push(item.pages.url).catch(() => {}) : null
      this.showFullSearch = false;
    },
    hnd_search_query_update(query) {
      // Show overlay if any character is entered
      this.$store.commit('TOGGLE_CONTENT_OVERLAY', query ? true : false)
    }
  }
}

</script>

Я жду, что смогите помогать мне решать это, благодаря всем!