[Vuejs]-Which right way to organization vue.js components and Laravel backend

Since you have more than one slider and all of them work in the same behavior instead of making multiple slider components for each section of your template so as in the picture you will end up with three slider components why not to create a single slider component and pass it the source that it should pull the data from as a props and then using Axios or VueResource to fetch data from that source check example below

//test.blade.php

<div id="app">
    <slider-component :source="{{$source}}"></slider-component>
</div>

//$source is a variable you compacted it (passed it) to blade view on render
//it could be the endpoint you want to fetch data from 
//for example if you want to pull hot-deals items it could be "/products/hot-deals"
//if you want it to be most viewed items then "/products/most-viewed" and so on
//for sure you have to register routes in your app that matches these end points

now lets take a look on how to fetch data from this source in our slider component

//slider component
<template>
    //your html goes here
</template>

<script>
    export default {
        props : ['source'], //this should be called source since in our blade we passed it as source
        data(){
            return {
                items : [],
            }
        },
        created(){
            axios.post(this.source , {
                 //your request body here
            })
            .then(res => {
                //handle the request and then assign items the res body
            })
            .catch(err => {
                //do something in case of error
            });
        }
    }
</script>

Now this way you have only a single slider component that is customizable and can fetch data from a custom source.

Here is how to handle from Laravel side first let’s create endpoints either in routes/web.php or routes/api.php for simplicity I will do that in routes/web.php

//routes/web.php
Route::get('/products/hot-deals" , "ProductController@hotDeals");

And here is the product Controller

use App\Models\Product;

class ProductController extends Controller {

    public function hotDeals(){
        //query your product model to select the hot-deals items for example
        return Product::where('price' , '<=' , 100);
    }
}

Hope you found this helpful , good luck.