Стили CSS, не применяемые к HTML в компоненте Vue

Я пытаюсь создать вращающуюся текстовую анимацию с использованием Vue.js и я использовал этот CodePen как вдохновение.

• Я правильно использовал все элементы HMTL (то есть, как в упомянутом CodePen). Короче:

  • каждое слово состоит из нескольких элементов <span>, каждая из которых содержит одну букву.
  • после определенного временного интервала, каждый <span> который содержит букву, применяет класс .in и .out CSS. Это продолжается бесконечно.

  • вот как это выглядит в DOM:

    

• проблема в том, что независимо от того, какие селектора CSS я использую, я не могу настроить таргетинг на классы .in и .out, если только это не делаю с помощью Developer Tools в Chrome:

  • оригинальный выход:

    

  • после добавления классов в Developer Tools:

    

Вот минимальный код моего Vue Component:

<template>
    <div id="app-loading">  
        <div class="words">
            <span v-for="setting in settings" v-html="setting.lettersHTML" :id="setting.id" class="word"></span>    
        </div>
    </div>
</template>


<script>
    export default {
        data() {
            return {
                settings: [
                    { word: 'WordOne', id: 1, lettersArray: null, lettersHTML: null },
                    { word: 'WordTwo', id: 2, lettersArray: null, lettersHTML: null }
                ],
                currentWord: 1
            }
        },

        created() {
            this.splitLetters();
        },

        mounted() {
            setInterval(this.changeWord, 1500);
        },

        methods: {
            splitLetters() {
                this.settings.forEach((setting) => {
                    let letters = [];
                    for (let i = 0; i < setting.word.length; i++) {
                        let letter = '<span class="letter">${ setting.word.charAt(i) }</span>';
                        letters.push(letter);
                    }
                    setting.lettersArray = letters;
                    setting.lettersHTML = letters.join('');
                });
            },

            changeWord() {
                let current = document.getElementById(this.currentWord).getElementsByTagName('span');
                let next = (this.currentWord == this.settings.length) ? document.getElementById(1).getElementsByTagName('span') : document.getElementById(this.currentWord + 1).getElementsByTagName('span');
                // Animate the letters in the current word.
                for (let i = 0; i < current.length; i++) {
                    this.animateLetterOut(current, i);
                }
                // Animate the letters in the next word.
                for (let i = 0; i < next.length; i++) {
                    this.animateLetterIn(next, i);
                }
                this.currentWord = (this.currentWord == this.settings.length) ? 1 : this.currentWord + 1;
            },

            animateLetterOut(current, index) {
                setTimeout(() => {
                    current[index].className = 'letter out';
                }, index * 300);
            },

            animateLetterIn(next, index) {
                setTimeout(() => {
                    next[index].className = 'letter in';
                }, 340 + (index * 300));
            }
        }
    }
</script>


<style lang="scss" scoped>
    #app-loading {
        font-size: 4rem;
    }

    .words, .word {
        border: 1px solid rosybrown;
    }

    .letter {
        text-decoration: underline; // Not working.
    }

    .letter.in {
        color: red; // Not working.
    }

    .letter.out {
        color: blue; // Not working.
    }
</style>

Что не так, что препятствует применению этих классов?