Vue JS Ключевые кадры с JS

Question

Я пытаюсь установить значение преобразования @keyframe программно.

.spin {
    animation-name: spin;
    animation-duration: 3s;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(1665deg);
    }

Мне нужно изменить значение 100% на единицу, которую я генерирую с помощью JavaScript

spinWheel() {
    let segments = [], segmentSize, winningSegment, app = this;

    app.spin = 'spin';
    //each segment
    segmentSize = 360 / 6;
    for(let i = 0; i <= 5; i++)
    {
        segments[i] = i*segmentSize;
    }
    winningSegment = Math.floor(Math.random() * 6);
    let start = winningSegment === 0 ? 0 : segments[winningSegment];
    let end   = winningSegment === 5 ? 360 : segments[winningSegment+1];
    let winningArea = {start: start  , end: end };

    app.start = 0;
    app.end = (360 * Math.floor(Math.random() * (30 - 15 + 1) + 15)) + Math.floor(Math.random() * (winningArea.end - winningArea.start + 1) + winningArea.start);

}

Поэтому, когда метод spinWheel() запускается

100% {
    transform: rotate(end);
}

изменится на значение app.end.

Я просто не могу понять, как это сделать.Буду признателен за любую оказанную помощь.