{
+ // ...
+ }
+}
+```
diff --git a/docs/guide/caveats.md b/docs/guide/caveats.md
new file mode 100644
index 0000000..6b26be3
--- /dev/null
+++ b/docs/guide/caveats.md
@@ -0,0 +1,88 @@
+# Caveats of Class Component
+
+Vue Class Component collects class properties as Vue instance data by instantiating the original constructor under the hood. While we can define instance data like native class manner, we sometimes need to know how it works.
+
+## `this` value in property initializer
+
+If you define an arrow function as a class property and access `this` in it, it will not work. This is because `this` is just a proxy object to the Vue instance when initializing class properties:
+
+```js
+import Vue from 'vue'
+import Component from 'vue-class-component'
+
+@Component
+export default class MyComp extends Vue {
+ foo = 123
+
+ // DO NOT do this
+ bar = () => {
+ // Does not update the expected property.
+ // `this` value is not a Vue instance in fact.
+ this.foo = 456
+ }
+}
+```
+
+You can simply define a method instead of a class property in that case because Vue will bind the instance automatically:
+
+```js
+import Vue from 'vue'
+import Component from 'vue-class-component'
+
+@Component
+export default class MyComp extends Vue {
+ foo = 123
+
+ // DO this
+ bar() {
+ // Correctly update the expected property.
+ this.foo = 456
+ }
+}
+```
+
+## Always use lifecycle hooks instead of `constructor`
+
+As the original constructor is invoked to collect initial component data, it is recommended against declaring `constructor` by yourself:
+
+```js
+import Vue from 'vue'
+import Component from 'vue-class-component'
+
+@Component
+export default class Posts extends Vue {
+ posts = []
+
+ // DO NOT do this
+ constructor() {
+ fetch('/posts.json')
+ .then(res => res.json())
+ .then(posts => {
+ this.posts = posts
+ })
+ }
+}
+```
+
+The above code intends to fetch post list on component initialization but the fetch will be called twice unexpectedly because of how Vue Class Component works.
+
+It is recommended to write lifecycle hooks such as `created` instead of `constructor`:
+
+```js
+import Vue from 'vue'
+import Component from 'vue-class-component'
+
+@Component
+export default class Posts extends Vue {
+ posts = []
+
+ // DO this
+ created() {
+ fetch('/posts.json')
+ .then(res => res.json())
+ .then(posts => {
+ this.posts = posts
+ })
+ }
+}
+```
\ No newline at end of file
diff --git a/docs/guide/class-component.md b/docs/guide/class-component.md
new file mode 100644
index 0000000..146c130
--- /dev/null
+++ b/docs/guide/class-component.md
@@ -0,0 +1,173 @@
+# Class Component
+
+`@Component` decorator makes your class a Vue component:
+
+```js
+import Vue from 'vue'
+import Component from 'vue-class-component'
+
+// HelloWorld class will be a Vue component
+@Component
+export default class HelloWorld extends Vue {}
+```
+
+## Data
+
+Initial `data` can be declared as class properties:
+
+```vue
+
+ {{ message }}
+
+
+
+```
+
+The above component renders `Hello World!` in the `