title: CSS styles not being applied to HTML within a Vue Component
body: <p>I am trying to create a rotating text animation using <code>Vue.js</code> and I used this <a href="https://codepen.io/anon/pen/rpQGPR" rel="noreferrer">CodePen</a> as inspiration.</p>
  
  <ul>
  <li><p>I got all the <code>HMTL</code> elements properly in place (i.e., as in the <a href="https://codepen.io/anon/pen/rpQGPR" rel="noreferrer">CodePen</a> mentioned). In short:</p>
  
  <ul>
  <li>each word is formed of several <code>&lt;span&gt;</code> elements, each containing one letter.</li>
  <li>following a specific time interval, each <code>&lt;span&gt;</code> that holds a letter gets applied an <code>.in</code> and <code>.out</code> <code>CSS</code> class. This goes on indefinitely.</li>
  <li><p>here is what it looks like in the <code>DOM</code>:</p>
  
  <p><a href="https://i.stack.imgur.com/Hrxg9.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/Hrxg9.jpg" alt="enter image description here"></a></p></li>
  </ul></li>
  <li><p>the problem is that no matter what <code>CSS</code> selectors I use, I can't target the <code>.in</code> and <code>.out</code> classes, unless I do it via <code>Developer Tools</code> in <code>Chrome</code>:</p>
  
  <ul>
  <li><p>original output:</p>
  
  <p><a href="https://i.stack.imgur.com/hVDri.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/hVDri.jpg" alt="enter image description here"></a></p></li>
  <li><p>output after I added the classes in <code>Developer Tools</code>:</p>
  
  <p><a href="https://i.stack.imgur.com/7Eahl.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/7Eahl.jpg" alt="enter image description here"></a></p></li>
  </ul></li>
  </ul>
  
  <p>Here is the bare minimum code of my <code>Vue Component</code>:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div id="app-loading"&gt;  
          &lt;div class="words"&gt;
              &lt;span v-for="setting in settings" v-html="setting.lettersHTML" :id="setting.id" class="word"&gt;&lt;/span&gt;    
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  
  &lt;script&gt;
      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) =&gt; {
                      let letters = [];
                      for (let i = 0; i &lt; setting.word.length; i++) {
                          let letter = `&lt;span class="letter"&gt;${ setting.word.charAt(i) }&lt;/span&gt;`;
                          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 &lt; current.length; i++) {
                      this.animateLetterOut(current, i);
                  }
                  // Animate the letters in the next word.
                  for (let i = 0; i &lt; next.length; i++) {
                      this.animateLetterIn(next, i);
                  }
                  this.currentWord = (this.currentWord == this.settings.length) ? 1 : this.currentWord + 1;
              },
  
              animateLetterOut(current, index) {
                  setTimeout(() =&gt; {
                      current[index].className = 'letter out';
                  }, index * 300);
              },
  
              animateLetterIn(next, index) {
                  setTimeout(() =&gt; {
                      next[index].className = 'letter in';
                  }, 340 + (index * 300));
              }
          }
      }
  &lt;/script&gt;
  
  
  &lt;style lang="scss" scoped&gt;
      #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.
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>What goes wrong that prevents these classes from being applied? </p>