Дмитрий

Суть вопроса теперь понятна после прочтения комментариев. Вы смешали соленое с красным.
Php тут не причем. Нельзя просто создать файл php в папке с vue и ждать от него чуда чудесного. Нет создать то можно, но работать не будет.

Для php файла нужен отдельный php сервер.
В зависимости от среды разработки. Openserver?
Или вы просто запустили npm run serve в папке с vue?

Ставьте openserver или xampp. Это самое простое/быстрое. Все зависит от масштабов и задач. Что должен возвращать data.php. данные из БД? Или статичные данные? Тогда можно просто .json файл создать в папке с vue и забрать данные с него и php вообще не нужен. А так смотрите в сторону - Laravel(помасштабнее)/lumen(полегче) - вполне доступные php фреймворки, чтобы получить данные из data.php, хотя нет. Даже файл такой создавать не придется)

Решили вопрос? мне кажется у вас в структуре jq кода нарушена последовательность. Я несколько уже подзабыл все нюансы, но
("#ratingDisLike").on('submit', function(e) {
и
$("#ratingsDislike").submit();
это разве не одно и то же?
а у вас одно в другом...

вынесите сами функции выше обработчиков событий - так будет проще понять где что не так...
п.с. вообще задача like/dislike проще несколько должна решаться) но это уже к делу не относится
UPDATE.

Фух... ну что сказать, чтобы не обидеть... надеюсь либо Вы учитесь, либо чей-то код разгребаете... потому что пусть я-не-гуру-но-что-то-умею пришлось повозиться. Как я и предполагал - код jquery неверный от и до.

Я искренне не смотрел Ваши скриншоты, что и куда отправляется и в отличии от многих никогда никого не критикую, ибо сам могу легко ошибаться. Плюс я не сторонник теорий и прочей правильности - главное "штоб работало". Поэтому еще раз - могу быть в корне не прав, но оно работает. Итак, к делу.
1) Код в форме

<form action="" method="post" id="ratingsLike" onSubmit="ratingLike(1,2,3);return false;">

я не уверен onSubmit или onsubmit (мне vscode показывает, что onsubmit корректнее). Далее прописываете функцию и параметры. Добавляете return false. Это вроде как preventDefault срабатывает.
Итого - форма.

<form id="ratingsLike" onsubmit="ratingLike(1,2,3);return false;">
        <button id="btnLike"><i id="thumbs-up" class="far fa-thumbs-up"></i></button>
    </form>

2) Здесь я не уверен почему так (у меня проект на laravel и blade шаблонах), но onsubmit срабатывает корректно (без перезагрузки) когда функция находится вне document.ready.
Скрипт.

<script type="text/javascript">
     function ratingLike(id,type,target){
                    console.log('внутри функции ratingLike' ,id,type,target)
                        $.ajax({
                            method: "POST",
                            url: "/like-dislike", //здесь адрес к обработчику. в вопросе вы написали rating.php а в jquery отправляли на revealator.php/like_dislike.php - это вообще винегрет по-моему(
                            data: { id: id, type:type } // можно еще dataType добавить в зависимости от ответа. 
                            })
                            .done(function( data ) {
                                $('#'+target).html(data.msg)  //вывод - мне приходит json поэтому через дату.
                        });
        }
     $(document).ready(function() {
        $('#btnLike').on('click',function(event){ //клик по кнопке. я убрал type=submit. Можно оставить и тогда этот блок вообще не нужен. Но так больше управляемости.
            event.preventDefault() 
            $('#ratingsLike').submit()
        })
    });

          </script>

в общем не хочу конечно показаться грубым, но проще все или почти все удалить и заново выстроить цепочку. Очень все перемешано и замешано, только чтобы like/dislike сделать.
Но если копаться дальше - ориентируйтесь на то, что я написал по поводу jq. Надеюсь не обидел

так а зачем в компоненте comment пытаться рендерить компонент comment. Мне кажется это так не работает.
я бы навскидку сделал компонент reply и в него уже передавал :reply="reply", итерируя в компоненте comment.

На мрй скромный взгляд, если Laravrel, то eloquent а не джойны.

Ваша задача решается через many to many отношения и eloquent запросами.
Связываете модели через belongsToMany.
Создаете таблицу attribute_product ( в алфавитном порядке и ед. Числе)
В доках все четко это расписано.
А дальше к моделям прикрепляете withPivot и доп. колонки.

В любом случае по ключевым словам laravel manyToMany, withPivot, whereHas найдете много информации

сутки почти угрохал, прежде чем догадался.... пересобрать mix(
npm run watch работал все время...
цитата Лаврова.

Вы без api строите проект? на чистом laravel? я проще решил вопрос. Breeze для базовой аутентификации.
Дальше просто manyToMany User-Role и через сидер -

public function run()
    {
        $role_admin_user = new Role;
        $role_admin_user->name = 'admin';
        $role_admin_user->description = 'An admin user';
        $role_admin_user->save();

        $role_regular_user = new Role;
        $role_regular_user->name = 'user';
        $role_regular_user->description = 'A regular user';
        $role_regular_user->save();

    }

user..

$admin = new User;
        $admin->name = 'Admin Name';
        $admin->email = 'dmk.forsocial@gmail.com';
        $admin->password = bcrypt('secret');
        $admin->save();
        $admin->roles()->attach(Role::where('name', 'admin')->first());

        $user = new User;
        $user->name = 'User';
        $user->email = 'dmk.forweb@gmail.com';
        $user->password = bcrypt('secret');
        $user->save();
        $user->roles()->attach(Role::where('name', 'user')->first());

и CheckRole middleware.
Безусловно подсмотрел в сети, но работает как надо для такой простой задачи
Если нужно, отпишитесь - скину подробнее

Я конечно не супер-гуру, но уже который год бьюсь вокруг laravel-vue-nuxt и в связках и по отдельности.
Сейчас как раз переписываю старый проект примерно по такой же системе.

Мне представляется, что можно обойтись одним div#app в основном layout

<body class="antialiased">
       <div id="app">
      @yield('content')
</div>
        @stack('scripts')
    </body>

, от которого уже наследовать страницы сайта. Просто регистрируете разные компоненты в app.js

const app = new Vue({
        el: '#app',
        router,
        store,
        components: { Homepage}, //здесь все ваши компоненты
    });

И уже просто в блейдах их вставляете где необходимо. По идее встроенной laravel авторизации будет достаточно, поскольку роутинг будет laravel. Намучался с vue/nuxt авторизациями - слишком много нового за последний год sanctum, fortify - черт ногу сломит.
Я поставил чистую лару с упрощенной авторизацией breeze.

Опять же повторю ни разу не гуру и могу ошибаться

У вас в самой последней строке ошибка.
А в фиддл не добавили jquery

вот так работает