refactor: adjust createApp related API signatures

BREAKING CHANGE: `createApp` API has been adjusted.

  - `createApp()` now accepts the root component, and optionally a props
  object to pass to the root component.
  - `app.mount()` now accepts a single argument (the root container)
  - `app.unmount()` no longer requires arguments.

  New behavior looks like the following:

  ``` js
  const app = createApp(RootComponent)
  app.mount('#app')
  app.unmount()
  ```

packages/vue/examples/composition/commits.html

@@ -32,7 +32,7 @@ const truncate = v => {
 
 const formatDate = v => v.replace(/T|Z/g, ' ')
 
-const App = {
+createApp({
   setup() {
     const currentBranch = ref('master')
     const commits = ref(null)
@@ -54,9 +54,7 @@ const App = {
       formatDate
     }
   }
-}
-
-createApp().mount(App, '#demo')
+}).mount('#demo')
 </script>
 
 <style>

packages/vue/examples/composition/grid.html

@@ -93,11 +93,11 @@ const DemoGrid = {
 </div>
 <!-- App script -->
 <script>
-const App = {
+Vue.createApp({
   components: {
     DemoGrid
   },
-  data: {
+  data: () => ({
     searchQuery: '',
     gridColumns: ['name', 'power'],
     gridData: [
@@ -106,10 +106,8 @@ const App = {
       { name: 'Jackie Chan', power: 7000 },
       { name: 'Jet Li', power: 8000 }
     ]
-  }
-}
-
-Vue.createApp().mount(App, '#demo')
+  })
+}).mount('#demo')
 </script>
 
 <style>

packages/vue/examples/composition/markdown.html

@@ -11,7 +11,7 @@
 const delay = window.location.hash === '#test' ? 16 : 300
 const { ref, computed } = Vue
 
-const App = {
+Vue.createApp({
   setup() {
     const input = ref('# hello')
     const output = computed(() => marked(input.value, { sanitize: true }))
@@ -23,9 +23,7 @@ const App = {
       update
     }
   }
-}
-
-Vue.createApp().mount(App, '#editor')
+}).mount('#editor')
 </script>
 
 <style>

packages/vue/examples/composition/svg.html

@@ -100,7 +100,8 @@ const globalStats = [
   { label: 'E', value: 100 },
   { label: 'F', value: 100 }
 ]
-const App = {
+
+createApp({
   components: {
     Polygraph
   },
@@ -133,9 +134,7 @@ const App = {
       remove
     }
   }
-}
-
-createApp().mount(App, '#demo')
+}).mount('#demo')
 </script>
 
 <style>

packages/vue/examples/composition/todomvc.html

@@ -90,7 +90,7 @@ function pluralize (n) {
   return n === 1 ? 'item' : 'items'
 }
 
-const App = {
+createApp({
   setup () {
     const state = reactive({
       todos: todoStorage.fetch(),
@@ -202,7 +202,5 @@ const App = {
       }
     }
   }
-}
-
-createApp().mount(App, '#app')
+}).mount('#app')
 </script>

packages/vue/examples/composition/tree.html

@@ -72,43 +72,43 @@ const TreeItem = {
 </ul>
 
 <script>
-const App = {
-  components: {
-    TreeItem
-  },
-  data: {
-    treeData: {
-      name: 'My Tree',
+const treeData = {
+  name: 'My Tree',
+  children: [
+    { name: 'hello' },
+    { name: 'wat' },
+    {
+      name: 'child folder',
       children: [
+        {
+          name: 'child folder',
+          children: [
+            { name: 'hello' },
+            { name: 'wat' }
+          ]
+        },
         { name: 'hello' },
         { name: 'wat' },
         {
           name: 'child folder',
           children: [
-            {
-              name: 'child folder',
-              children: [
-                { name: 'hello' },
-                { name: 'wat' }
-              ]
-            },
             { name: 'hello' },
-            { name: 'wat' },
-            {
-              name: 'child folder',
-              children: [
-                { name: 'hello' },
-                { name: 'wat' }
-              ]
-            }
+            { name: 'wat' }
           ]
         }
       ]
     }
-  }
+  ]
 }
 
-Vue.createApp().mount(App, '#demo')
+Vue.createApp({
+  components: {
+    TreeItem
+  },
+  data: () => ({
+    treeData
+  })
+}).mount('#demo')
 </script>
 
 <style>