s9e125 switching multiple components with dynamic components

s9/src/App.vue

@@ -2,10 +2,18 @@
     <div class="container">
         <div class="row">
             <div class="col-xs-12">
-                <app-quote>
+                <button @click="selectedComponent = 'appQuote'">Quote</button>
+                <button @click="selectedComponent = 'appAuthor'">Author</button>
+                <button @click="selectedComponent = 'appNew'">New</button>
+                <hr>
+                <!--<app-quote>-->
+
+                <!--</app-quote>-->
+                <component :is="selectedComponent"
+                >
                     <h2 slot="title">{{quoteTitle}}</h2>
                     <p>A Simple Quote</p>
-                </app-quote>
+                </component>
             </div>
         </div>
     </div>
@@ -13,15 +21,20 @@
 
 <script>
     import Quote from './components/Quote.vue'
+    import Author from './components/Author.vue'
+    import New from './components/New.vue'
 
     export default {
         data(){
           return {
-              quoteTitle: "The Quote"
+              quoteTitle: "The Quote",
+              selectedComponent: 'appQuote'
           }
         },
         components: {
-            appQuote: Quote
+            appQuote: Quote,
+            appAuthor: Author,
+            appNew: New,
         }
         
     }