refactor: don't use the sandbox in dev (#1168)

* refactor: don't use the sandbox

* refactor: update docs package.json

 https://github.com/sagalbot/vue-select/issues/1161#issuecomment-615359135

dev/Dev.vue

@@ -1,39 +1,44 @@
 <template>
   <div id="app">
-    <sandbox hide-help v-slot="config">
-      <v-select v-bind="config"/>
-    </sandbox>
+    <v-select v-model="selected" v-bind="config" />
   </div>
 </template>
 
 <script>
-import vSelect from '../src/components/Select';
-import Sandbox from '../docs/.vuepress/components/Sandbox';
-// import countries from '../docs/.vuepress/data/countryCodes';
-// import books from '../docs/.vuepress/data/books';
+import vSelect from "../src/components/Select";
+import countries from "../docs/.vuepress/data/countryCodes";
+import books from "../docs/.vuepress/data/books";
 
 export default {
-  components: {Sandbox, vSelect},
+  components: { vSelect },
+  data: () => ({
+    selected: null,
+    config: {
+      options: countries
+    }
+  })
 };
 </script>
 
 <style>
-  html,
-  body {
-    margin: 0;
-    height: 100%;
-    font-family: -apple-system, sans-serif;
-  }
+html,
+body {
+  margin: 0;
+  height: 100%;
+  font-family: -apple-system, sans-serif;
+}
 
-  #app {
-    height: 100%;
-  }
+#app {
+  height: 100%;
+  max-width: 20rem;
+  margin: 10rem auto 0;
+}
 
-  hr {
-    border: none;
-    border-bottom: 1px solid #cacaca;
-    margin-bottom: 1em;
-    padding-top: 1em;
-    width: 90%;
-  }
+hr {
+  border: none;
+  border-bottom: 1px solid #cacaca;
+  margin-bottom: 1em;
+  padding-top: 1em;
+  width: 90%;
+}
 </style>

docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-select/docs",
-  "version": "1.0",
+  "version": "1.0.0",
   "license": "MIT",
   "scripts": {
     "serve": "vuepress dev",