MadeWithCards
diff --git a/‎README.md‎
Lines changed: 9 additions & 1 deletion b/‎README.md‎
Lines changed: 9 additions & 1 deletion
diff --git a/‎demo/App.vue‎
Lines changed: 20 additions & 15 deletions b/‎demo/App.vue‎
Lines changed: 20 additions & 15 deletions
diff --git a/‎demo/main.js‎
Lines changed: 2 additions & 3 deletions b/‎demo/main.js‎
Lines changed: 2 additions & 3 deletions
diff --git a/‎index.html‎
Lines changed: 1 addition & 2 deletions b/‎index.html‎
Lines changed: 1 addition & 2 deletions
@@ -4,6 +4,10 @@ Using the component allows you to easily render https://adaptivecards.io/ in you
 
 For more information about Adaptive Cards read this: https://docs.microsoft.com/en-us/adaptive-cards
 
+# Versioning changed!
+You might have noticed the version made a big jump, thats because we want to be inline with supported
+AdaptiveCards version which currently is 2.9.0
+
 # Installation
 
 ```
@@ -36,7 +40,6 @@ export default {
     <adaptive-card 
     :card="card" 
     :data="data"
-    :cardUrl="cardUrl"
     :useTemplating="true"
     v-on:onActionClicked="onItemClick"
   />
@@ -55,6 +58,11 @@ Read: https://docs.microsoft.com/en-us/adaptive-cards/templating/ for a guide ab
 Also: https://medium.com/@tim.cadenbach/why-templating-for-adaptive-cards-is-a-game-changer-1606de3226ed
 might help. 
 
+**NOTE:** Breaking Change!
+When using the most recent AdaptiveCards Templating package you have to update your templates. 
+
+Instead of using {$root.data} you now have to use ${$root.data}
+
 __:useTemplating__
 
 When passing in a template set to true
 
@@ -12,46 +12,51 @@
           </a>
         </h1>
         <p>Adaptive Cards in Vue.js</p>
+        <button @click="update">
+          Add 1
+        </button>
         <hr style="margin: 50px 0px;border: 1px solid #e3e3e3;">
       </div>
-      <adaptive-card 
-        :card="card" 
+      {{ data.title }}
+      <adaptive-cards
+        :card="card"
         :data="data"
-        :cardUrl="cardUrl"
-        :useTemplating="true"
-        v-on:onActionClicked="onItemClick"
+        :use-templating="true"
+        :host-config="config"
+        @onActionClicked="onItemClick"
       />
     </div>
   </div>
 </template>
 
 <script>
-import SampleCard from '../src/assets/exampleCard.json';
-import SampleData from '../src/assets/exampleData.json';
+import SampleCard from '../src/assets/exampleCard.json'
+import SampleData from '../src/assets/exampleData.json'
+import HostConfig from '../src/assets/exampleHostConfig2.json'
 export default {
   name: 'App',
-  components:[
-    SampleCard,
-    SampleData
-  ],
   data () {
     return {
       data: SampleData,
       card: SampleCard,
+      config: HostConfig,
       cardUrl: 'https://templates.adaptivecards.io/teamwork.com/projects/task.json'
     }
   },
   methods: {
     onItemClick (event, item) {
-      alert(event);
-      alert(item);
+      alert(event)
+      alert(item)
+    },
+    update () {
+      console.log('triggered!')
+      this.data.title = 'Data Was changed!'
     }
   }
 }
 </script>
 
-<style lang="scss">
-@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600');
+<style lang="css">
 
 body,
 html {
 
@@ -1,11 +1,10 @@
 import Vue from 'vue'
 import App from './App.vue'
 import VueRouter from 'vue-router'
-import AdaptiveCard from '../src/index'
-
+import AdaptiveCards from '../src/index'
 
 Vue.use(VueRouter)
-Vue.use(AdaptiveCard)
+Vue.use(AdaptiveCards)
 const router = new VueRouter({
   routes: [
     {
 
@@ -4,8 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <title>Adaptive Cards in Vue.js</title>
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
-  </head>
+   </head>
   <body>
     <div id="app"></div>
     <script src="./demo/dist/build.js"></script>