Add in reactive component base

Author: sdras

README.md

@@ -32,18 +32,19 @@ You can enable tab completion (recommended) by opening `Code > Preferences > Set
 
 ### Vue
 
-| Snippet      | Purpose                                               |
-| ------------ | ----------------------------------------------------- |
-| `vbase`      | Single file component base with SCSS                  |
-| `vbase-3`    | Single File component Composition API with SCSS       |
-| `vbase-css`  | Single file component base with CSS                   |
-| `vbase-pcss` | Single file component base with PostCSS               |
-| `vbase-styl` | Single file component base with Stylus                |
-| `vbase-ts`   | Single file component base with Typescript            |
-| `vbase-3-ts` | Single File component Composition API with Typescript |
-| `vbase-ns`   | Single file component with no styles                  |
-| `vbase-sass` | Single file component base with SASS                  |
-| `vbase-less` | Single file component base with LESS                  |
+| Snippet            | Purpose                                                      |
+| ------------------ | ------------------------------------------------------------ |
+| `vbase`            | Single file component base with SCSS                         |
+| `vbase-3`          | Single File component Composition API with SCSS              |
+| `vbase-3-reactive` | Single File component Composition API with Reactive and SCSS |
+| `vbase-css`        | Single file component base with CSS                          |
+| `vbase-pcss`       | Single file component base with PostCSS                      |
+| `vbase-styl`       | Single file component base with Stylus                       |
+| `vbase-ts`         | Single file component base with Typescript                   |
+| `vbase-3-ts`       | Single File component Composition API with Typescript        |
+| `vbase-ns`         | Single file component with no styles                         |
+| `vbase-sass`       | Single file component base with SASS                         |
+| `vbase-less`       | Single file component base with LESS                         |
 
 ### Template
 

snippets/vue-script.json

@@ -133,7 +133,7 @@
   },
   "Vue Import Component Dynamically": {
     "prefix": "vimport-dynamic",
-    "body": ["const ${1:New} = () => import('@/components/${1:New}.vue')"],
+    "body": ["${1:New} = () => import('@/components/${1:New}.vue')"],
     "description": "Import component that should be lazy loaded"
   },
   "Vue MapState": {

snippets/vue.json

@@ -190,6 +190,37 @@
     ],
     "description": "Base for Vue File Composition API with SCSS"
   },
+  "Vue Single File Component Composition API Reactive": {
+    "prefix": "vbase-3-reactive",
+    "body": [
+      "<template>",
+      "\t<div>",
+      "",
+      "\t</div>",
+      "</template>",
+      "",
+      "<script>",
+      "import { reactive, toRefs } from '@vue/composition-api'",
+      "",
+      "export default {",
+      "\tsetup () {",
+      "\t\tconst state = reactive({",
+      "\t\t\t${0:count}: ${1:0},",
+      "\t\t})",
+      "\t",
+      "\t\treturn {",
+      "\t\t\t...toRefs(state),",
+      "\t\t}",
+      "\t}",
+      "}",
+      "</script>",
+      "",
+      "<style lang=\"scss\" scoped>",
+      "",
+      "</style>"
+    ],
+    "description": "Base for Vue File Composition API with SCSS"
+  },
   "Vue Single File Component Composition API with Typescript": {
     "prefix": "vbase-3-ts",
     "body": [