make lottie animation work

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "my-component",
-  "description": "A Vue.js project",
+  "name": "vue-lottie",
+  "description": "Lottie Animation View for Vue",
   "version": "0.0.1",
   "author": "CHEN Qing",
   "private": true,
@@ -10,7 +10,8 @@
     "gh-pages": "git checkout gh-pages && git merge master --no-edit && npm run build && git add . && git commit -m 'chore: build demo' --allow-empty && git push && git checkout master"
   },
   "dependencies": {
-    "vue": "^2.2.1"
+    "vue": "^2.2.1",
+    "bodymovin": "^4.5.6"
   },
   "devDependencies": {
     "babel-core": "^6.0.0",
@@ -24,6 +25,6 @@
     "webpack": "^2.2.0",
     "webpack-dev-server": "^2.2.0"
   },
-  "main": "src/my-component.vue"
+  "main": "src/lottie.vue"
 
 }

src/App.vue

@@ -1,18 +1,24 @@
 <template>
     <div id="app">
         <img src="./assets/logo.png">
-        <my-component/>
+        <lottie :options="defaultOptions" height="400" width="400"/>
     </div>
 
 </template>
 
 <script>
-  import MyComponent from './my-component.vue'
+  import Lottie from './lottie.vue';
+  import * as animationData from './assets/pinjump.json';
 
   export default {
     name: 'app',
     components: {
-      'my-component': MyComponent
+      'lottie': Lottie
+    },
+    data() {
+      return {
+        defaultOptions: {animationData: animationData}
+      }
     }
   }
 </script>