s9e121 how content gets compiled

s9/src/App.vue

@@ -3,7 +3,7 @@
         <div class="row">
             <div class="col-xs-12">
                 <app-quote>
-                    <h2>The Quote</h2>
+                    <h2>{{quoteTitle}}</h2>
                     <p>A Simple Quote</p>
                 </app-quote>
             </div>
@@ -15,6 +15,11 @@
     import Quote from './components/Quote.vue'
 
     export default {
+        data(){
+          return {
+              quoteTitle: "The Quote"
+          }
+        },
         components: {
             appQuote: Quote
         }
@@ -22,5 +27,8 @@
     }
 </script>
 
-<style>
+<style scoped>
+    h2 {
+        color: red;
+    }
 </style>

s9/src/components/Quote.vue

@@ -17,6 +17,8 @@
         padding: 30px;
         margin: 30px auto;
         text-align: center;
-
+    }
+    h2 {
+        color: blue
     }
 </style>