From de177b7cd39e1c68f876291519a311ed5fc78c19 Mon Sep 17 00:00:00 2001
From: ckritzinger <ckritzinger@gmail.com>
Date: Fri, 18 Aug 2017 10:45:21 +0200
Subject: [PATCH] vue docs update (#661)

---
 README.md | 39 +++++++++++++++++++++++++++++++++++++--
 1 file changed, 37 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index afd2d75ac..06f529de4 100644
--- a/README.md
+++ b/README.md
@@ -604,6 +604,8 @@ document.addEventListener('DOMContentLoaded', () => {
 
 #### Vue
 
+Add the data as attributes in the element you are going to use (or any other element for that matter).
+
 ```erb
 <%= content_tag :div,
   id: "hello-vue",
@@ -614,17 +616,50 @@ document.addEventListener('DOMContentLoaded', () => {
 <% end %>
 ```
 
+This should produce the following HTML:
+
 ```html
-<div id="hello-vue" data-name="David" data-message="Hello!"></div>
+<div id="hello-vue" data="{&quot;message&quot;:&quot;Hello!&quot;,&quot;name&quot;:&quot;David&quot;}"></div>
+```
+
+Now, modify your Vue app to expect the properties.
+
+```html
+<template>
+  <div id="app">
+    <p>{{test}}{{message}}{{name}}</p>
+  </div>
+</template>
+
+<script>
+  export default {
+    // A child component needs to explicitly declare
+    // the props it expects to receive using the props option
+    // See https://vuejs.org/v2/guide/components.html#Props
+    props: ["message","name"], 
+    data: function () {
+      return {
+          test: 'This will display: ',
+      }
+    }
+  }
+</script>
+
+<style>
+</style>
+
 ```
 
+
 ```js
-// Render component with props
 
 document.addEventListener('DOMContentLoaded', () => {
+
+  // Get the properties BEFORE the app is instantiated
   const node = document.getElementById('hello-vue')
   const props = JSON.parse(node.getAttribute('data'))
 
+  // Render component with props
   new Vue({
     render: h => h(App, { props })
   }).$mount('#hello-vue');