diff --git a/README.md b/README.md
index 9e442fd..fd4ae8a 100644
--- a/README.md
+++ b/README.md
@@ -21,7 +21,9 @@ $ npm install vue-bulma-brace --save
       :codefolding="'markbegin'"
       :softwrap="'free'"
       :selectionstyle="'text'"
-      :highlightline="true">
+      :highlightline="true"
+      @code-change="codeChange"
+      ref="editor">
     </brace>
   </div>
 </template>
@@ -32,6 +34,15 @@ import Brace from 'vue-bulma-brace'
 export default {
   components: {
     Brace
+  },
+  mounted () {
+    // Set the initial value
+    this.$refs.editor.setCode("// the initial value")
+  },
+  methods: {
+    codeChange (newValue) {
+      // Use the value
+    }
   }
 }
 </script>
diff --git a/src/Brace.vue b/src/Brace.vue
index 72f08b5..0389dbb 100644
--- a/src/Brace.vue
+++ b/src/Brace.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id='vue-bulma-editor'></div>
+  <div :id='id'></div>
 </template>
 
 <script>
@@ -17,6 +17,10 @@ const regMap = {
 
 export default {
   props: {
+    id: {
+      type: String,
+      default: 'vue-bulma-editor'
+    },
     mode: {
       type: String,
       default: 'json',
@@ -73,13 +77,16 @@ export default {
         editor.setTheme(themeObj.theme)
       }
     },
+    setCode (code) {
+        editor.session.setValue(code);
+    },
     emitCode () {
       this.$emit('code-change', editor.getValue())
     }
   },
 
   mounted () {
-    editor = brace.edit('vue-bulma-editor')
+    editor = brace.edit(this.id)
     this.setMode()
     this.setTheme()
     editor.$blockScrolling = Infinity