Как правильно организовать компоненты vue.js и бэкэнд Laravel

Так и должно быть. Компонент - это отдельный объект, который не беспокоит другие внешние компоненты. Вы можете запросить у компонента сбор всех необходимых вам ресурсов. Никакой другой компонент Vue.js не заботится об этих ресурсах. Вы также можете создать другое действие для компонента, и оно ничего не отразится на других компонентах. Вы можете делать все, что захотите, внутри компонента.

Чтобы решить сложную структуру, вы можете создать дочерний компонент, а дочерний компонент может содержать другой дочерний компонент и так далее.

Вы можете поместить логику запроса сервера в ловушку созданный или даже в ловушку установленный. Поскольку запрос всегда асинхронный, вам нужно подождать, пока ваш компонент получит все данные с сервера. А пока используйте какой-нибудь загрузчик в своем элементе, чтобы визуально отобразить, что что-то загружается. И когда вы получаете данные, вы знаете, что вам нужно делать.

Согласно вашей картинке, весь ваш слайдер будет составной частью. И каждая карточка в этом слайдере тоже будет компонентом. Используйте v-для в компоненте карты для динамического создания нескольких карт. У вас также может быть другой компонент внутри вашего компонента карты. Таким образом вы можете упростить свою логику. Будет намного лучше, если вы будете использовать однофайловый компонент Vue (файл .vue).

Поскольку у вас более одного слайдера, и все они работают с одним и тем же поведением вместо создания нескольких компонентов слайдера для каждого раздела вашего шаблона, так как на картинке вы получите три компонента слайдера, почему бы не создать один компонент слайдера и передать ему источник, из которого он должен извлекать данные в качестве реквизита, а затем использовать Axios или VueResource для извлечения данных из этого источника, проверьте пример ниже

//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

Теперь давайте посмотрим, как получить данные из этого источника в нашем компоненте слайдера.

//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>

Таким образом, у вас есть только один настраиваемый компонент слайдера, который может извлекать данные из настраиваемого источника.

Вот как работать со стороны Laravel, сначала давайте создадим конечные точки либо в routes/web.php, либо в routes/api.php для простоты, я сделаю это в routes/web.php

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

А вот и контроллер продукта

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);
    }
}

Надеюсь, вы нашли это полезным, удачи.