Vue Js and Laravel Web Application

I'm building a web application with Vue JS 2 (Vuetify) as the front end and Laravel 5.5 back end, the vue components exist inside blade templates. This is going to be used on a variety of devices from Android/iPhones to much larger tablets and touch screen devices.

My controllers handle all my database logic and i have tried two different approaches for accessing the data, both of them work i am simply looking for advice on which one i should go with:

Method 1:

Controller:

public function index() {

    $quote = Quote::All();

    return view('mobile.quotes.view', compact('quote'));
}

Blade:

<app-quotes :quote=""></app-quotes>

I then access the data using props in my Component:

<template>
<div>
  <h1>Quotes</h1>
  <p v-for="quote in quote"></p>
</div>
</template>

This works as expected but now.

Method 2:

I use Axios to send a request to my controller from my component which returns the data as expected in a json response.

Controller:

public function view($id) {

    $quote = Quote::All();

    //dd($quote);

    return response()->json($quote);
}

Component:

  created() {
  // Make a request for a user with a given ID
  axios.get('quotes/view/1')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
}

Now for my question. Based on the fact my application will be running on a variety of devices as a web application enclosed in a wrapper, which method should i go with for accessing my data and which would be the quickest? Which would put the least amount of strain on the system and use the least amount of resources or would they use the same?

via Chebli Mohamed