Арсений

Закругления работают. Ваша проблема в смещении spacing на -30:

<template>
    <div class="doughnut">
        <canvas ref="chart"></canvas>
    </div>
</template>

<script setup>

import {onMounted, ref} from "vue";
import {
    Chart,
    DoughnutController,
    ArcElement,
} from 'https://cdn.skypack.dev/chart.js@4.2.1';
  
Chart.register(
    DoughnutController,
    ArcElement,
);

const chart = ref(null);

const data = {
    datasets: [
        {
            data: [40, 22, 8, 30],
            backgroundColor: [
                "#F04B92",
                "#54B2FD",
                "#FFC24B",
                "#49EBCE",
            ],
            display: true,
            offset: 2,
            spacing: -30,
            borderColor: "#fff",
            borderWidth: 2,
            borderRadius: [
                {outerStart: 16,  outerEnd: 2, innerStart: 16},
                {outerStart: 16,  outerEnd: 2, innerStart: 16},
                {outerStart: 16,  outerEnd: 2, innerStart: 16},
                {outerStart: 16,  outerEnd: 16, innerStart: 16, innerEnd: 16}
            ],
            cutout: "58%",
        }
    ],
    labels: false
};

const config = {
    type: 'doughnut',
    data,
    options: {
        rotation: 270,
        circumference: 180,
        maintainAspectRatio: false,
        responsive: true,
        animation: {
            animateRotate: true
        }
    },
}

onMounted(() => {
  
    const myChart = new Chart(
        chart.value,
        config
    );
  
    const ctx = myChart.canvas.getContext("2d");

    ctx.scale(0.8, 0.8);
});
  
  

</script>

https://developer.mozilla.org/en-US/docs/Web/API/D...
https://developer.mozilla.org/en-US/docs/Mozilla/A...
https://developer.mozilla.org/en-US/docs/Web/API/C...
https://developer.mozilla.org/en-US/docs/Web/API/n...

Это все касается интерактивной части уведомлений, а как получать уведомления с сервера вам уже описали.

Во-первых, это два разных вопроса.
По поводу мигания вам уже написали.
А вот по поводу получения уведомления есть разные способы, все они потребуют фоновых запросов, чтобы не блокировать вкладку.
Простейший пример - polling. Каждые несколько секунд шлем запрос на сервер "а есть ли новые сообщения?", на что сервер отвечает либо "нету" либо отдаёт список новых сообщений. Просто, но грузит сеть, жрёт батарейку, грузит сервер.
Чуть сложнее - long polling. Мы шлём запрос "есть ли новые сообщения?" на сервер с длинным таймаутом, скажем, несколько минут. Если сообщений нет, сервер молчит, но запрос не прерывает. Он только у себя время от времени проверяет их наличие. Как только сообщение появилось, сервер шлёт ответ и закрывает соединение.
Когда клиент получил ответ или когда случился таймаут, клиент запускает новое соединение и снова ждёт ответа.
Ну или использовать web sockets - ЕМНИП, когда соединение установлено, сервер может уже послать что-то по своей инициативе. Но это нужно изучать.

var titleState=0;
setInterval(()=>{
document.title=titleFlag?"Мигающий":"заголовок";
titleState = titleState?0:1;
},500);

Кладёте ссылку на круг в компонент:

this.circle = new ymaps.Circle(
  ...

И устанавливаете наблюдение за свойством, которое представляет радиус:

watch: {
  радиусКруга(val) {
    this.circle.geometry.setRadius(val);
  },
  ...

https://jsfiddle.net/5qmrxez0/

Или, если этот круг нигде больше не понадобиться, то можно не делать его свойством компонента, а прямо по месту его создания установить наблюдение за радиусом:

const circle = new ymaps.Circle(
  ...
);

this.$watch('радиусКруга', val => circle.geometry.setRadius(val));

https://jsfiddle.net/5qmrxez0/1/

Если тебе не нужно менять содержимое прилипшего блока, а только делать ему перерасчет, то почему ты не воспользовался обычным position:sticky;?

document.querySelectorAll('.group-options__item').forEach(n => {
  const input = (n.closest('.group-options') ?? n).querySelector('[data-prop]');
  if (input) {
    input.checked = true;
  }
});