Сырой HTML

Изучаю Vue. Не понял пример

https://ru.vuejs.org/v2/guide/syntax.html#Сырой-HTML

HTML:

1. <p>Двойные фигурные скобки: {{ rawHtml }}</p>
2. <p>Директива v-html: <span v-html="rawHtml">444</span></p>

Почему ничего не меняется?
--- Добавлено ---
По идеи, вместо {{ rawHtml }}, должно подставиться <span>444</span>

 

Я разобрался

HTML:

1. <div id="my">
2.         <p>Двойные фигурные скобки: {{ rawHtml }}</p>
3.         <p>Директива v-html: <span v-html="rawHtml"></span></p>
4.     </div>
5.    
6.     <script>
7.         var app10 = new Vue({
8.           el: '#my',
9.           data: {
10.             rawHtml: '<span style="color: red">Текст должен быть красным.</span>'
11.           }
12.         })
13.     </script>