Как передать пропсы, данные для которых получаем асинхронно?

Я полностью повторил ваш код локально и всё работает. Данные как запрашиваете?

<script setup>
    import { onMounted, ref } from "vue";
    import ListLoading from "@/components/habr/ListLoading.vue";

    const newsList = ref([]);

    const sendData = () => {
        fetch("/news-list.json")
            .then((response) => response.json())
            .then((result) => (newsList.value = result));
    };

    onMounted(async () => {
        await sendData();
    });
</script>

<template>
    <ListLoading :news-list="newsList" />
</template>

<style lang="scss"></style>

Как сделать Preloader с учетом определённого времени?

У вас в коде стоит 200000 мс, что равно 200 сек. Поставьте 20000 мс для 20 сек. В остальном что не работает?

Как взять значение из дата атрибута и записать в псевдоэлемент?

Именно текст или все же сам псевдо-элемент?

Как взять значение из дата атрибута и записать в псевдоэлемент?

https://jsfiddle.net/rp7nwdm2/
Первое что пришло в голову, но плохо :)
Я бы лучше JSом заменял когда необходимо текст из дата в textcontent

Как взять значение из дата атрибута и записать в псевдоэлемент?

Вы что в итоге хотите получить?

Как взять значение из дата атрибута и записать в псевдоэлемент?

Как взять значение из дата атрибута и записать в псевдоэлемент?
Ну и что не так? берется же значение из data атрибута и даже перекрывает, но не заменяет, вы этого не просили.

Как установить Css-стиль активного слайда на одной из нескольких slick-каруселей?

поправил точки, с телефона пальцы не попадают. В конце Slide можете убрать, смотря что вам стилизовать нужно. В начале вопроса другая иерархия была

Как установить Css-стиль активного слайда на одной из нескольких slick-каруселей?

Snatch08,

.SlidePanel .slick-slide .Slide{
  display: block;
  opacity: .1;
  transition-delay: 0s;
  transition-duration: 0.2s;
  transition-property: opacity;
  transition-timing-function: ease-out;
  background-color: green; 
}

.SlidePanel .slick-current .Slide {
  display: block;	
  opacity: 1;
  transition-delay: 0.3s;
  transition-duration: 0.2s;
  transition-property: opacity;
  transition-timing-function: ease-in;
  background-color: yellow; 	
}

В вашем случае класс.класс2, значит что элемент имеет оба класса сразу.
Почитайте подробнее о наследовании в css

Как установить Css-стиль активного слайда на одной из нескольких slick-каруселей?

Snatch08, Ну вот у вас SlidePanel название карусели, от неё и наследуйтесь.
Внутри вашей карусели текущий слайд имеет класс slick-current.
.SlidePanel slick-current
slick-slide это обертка вашего слайда и если необходимо стилизовать именно ваш класс, то ещё глубже вложенность просто.
В dev tools это все можно посмотреть

Как массово сжать картинки для сайта?

function image() {
    return gulp.src([path.source.img])
        .pipe(cache(imagemin([
            //png
            imageminPngquant({
                speed: 1,
                quality: [0.8, 0.9] //lossy settings
            }),
            imageminZopfli({
                more: true,
                iterations: 30 // 50 very slow but more effective
            }),
            //svg
            imagemin.svgo({
                plugins: [{
                    removeViewBox: false
                }]
            }),
            //jpg lossless
            imagemin.jpegtran({
                progressive: true
            }),
            //jpg very light lossy, use vs jpegtran
            imageminMozjpeg({
                quality: 75
            })
        ])))
        .pipe(gulp.dest(path.build.img));
}

Попробуйте такой вариант, если через tinypng разделить картинки по 500 не представляется возможным.
Какие установить пакеты я думаю поймете. Ну и с настройками можно поиграться